美文网首页
十九、jquery之——链式调用、特殊效果、动画、循环

十九、jquery之——链式调用、特殊效果、动画、循环

作者: 风中丶凌乱 | 来源:发表于2018-09-19 20:47 被阅读0次

    特殊效果

    1. fadeOut() 淡出
    2. fadeToggle() 切换淡入淡出
    3. hide() 隐藏元素
    4. show() 显示元素
    5. toggle() 依次展示或隐藏某个元素
    6. slideDown() 向下展开
    7. slideUp() 向上卷起
    8. slideToggle() 依次展开或卷起某个元素
    fadeIn() 淡入
        $btn.click(function(){
            $('#div1').fadeIn(1000,'swing',function(){
                alert('done!');
            });
    
        });
    
    

    链式调用

    jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写:

    $('#div1') // id为div1的元素
    .children('ul') //该元素下面的ul子元素
    .slideDown('fast') //高度从零变到实际高度来显示ul元素
    .parent()  //跳到ul的父元素,也就是id为div1的元素
    .siblings()  //跳到div1元素平级的所有兄弟元素
    .children('ul') //这些兄弟元素中的ul子元素
    .slideUp('fast');  //高度实际高度变换到零来隐藏ul元素
    

    动画

    通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。

    $('#div1').animate({
        width:300,
        height:300
    },1000,swing,function(){
        alert('done!');
    });
    

    参数可以写成数字表达式:

    $('#div1').animate({
        width:'+=100',
        height:300
    },1000,swing,function(){
        alert('done!');
    });
    
    $(function(){
                /*
                参数:
                1、什么属性做动画,属性设置{param1: value1, param2: value2}
                2、动画执行的时间,单位毫秒
                3、动画曲线:
                    swing(默认值)开始和结束慢,中间快
                    linear匀速
                    可省略不写
                4、回调函数,动画完成之后要做的事情,可无限嵌套
                */
                $('#div1').animate({
                    width: 200,
                    height: 200},
                    1000,
                    function(){
                        // alert('动画完了!');
                        $(this).animate(
                            {marginLeft: 500},
                            1000,
                            function(){
                                $(this).animate(
                                    {marginTop: 500},
                                    1000
                                )
                            }
                        )
                    }
                );
            })
    

    循环

    $(function(){
                // //给全部的li设置内容和样式
                // $('.list li').html('111');
                // $('.list li').css({background:'gold'});
    
                //第一个参数index是索引值
                $('.list li').each(function(index) {
                    // alert(index);//弹出索引值
                    
                    //$(this)是每一个li
                    $(this).html(index);
                });
            })
    

    相关文章

      网友评论

          本文标题:十九、jquery之——链式调用、特殊效果、动画、循环

          本文链接:https://www.haomeiwen.com/subject/ptlwnftx.html