jQuery——动画

Posted 2020-08-10 吴林霏smile

jQuery中的动画

【show()方法和hide()方法】

在html文档中，为一个元素调用hide()方法，会将该元素的display样式改为“none”，show()方法将元素的display样式改为先前的显示状态。

$(function(){
    $("#pane1 h5.head").toggle(function(){
        $(this).next().hide();
    }.function(){
        $(this).next().show();
    });
});

用jQuery做动画效果要求要在标准模式下，否则可能会引起动画抖动。

让元素动起来

如果希望在调用show()方法时，元素慢慢的显示出来，可以为show()方法指定一个速度参数。如，指定一个速度关键字“slow”

$("element").show("slow");

运行该代码后，元素将在600毫秒内慢慢地显示出来，还有其他关键字“normal”和“fast”。还可以为显示速度指定一个数字，单位是毫秒。

【fadeIn()方法和fadeOut()方法】

此方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度，知道元素完全消失，fadeIn()则相反。

$(function(){
    $("#pane1 h5.head").toggle(function(){
        $(this).next().fadeOut();
    }.function(){
        $(this).next().fadeIn();
    });
});

【slideUp()方法和slideDown()方法】

此方法只会改变元素的高度。如果一个元素的display属性值为“none”，当调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反。

【自定义动画方法animate()】

语法结构：animate(params,speed,callback);

参数说明:params:一个包含样式属性及值的映射，比如{property:"value1",property2:"value2",.....}。

　　　　speed：速度参数，可选。

　　　　callback：在动画完成时执行的函数，可选。

自定义简单动画：

$(function(){
    $("pane1").click(function(){
        $(this).animate({left:"500px"},3000);
     });
});

作用：使元素在3秒内，向右移动500像素。且css代码中设置的是“position:relative”。

累加、累减动画：在500px之前加上“+=”或者“-=”符号即可表示在当前位置累加或者累减。{left:"+=500px",3000};

多重动画

（1）同时执行多个动画：

$(function(){
    $("myImg").click(function(){
       $(this) .animate({left:"500px",height:"200px"},3000);  //<div>元素在向右滑动同时，也会放大高度
    });
});

（2）按顺序执行多个动画：只需要把代码拆开，然后按照顺序写。

$(this).animate({left:"500px"},3000);
$(this).animate({height:"500px"},3000);
//也可以改为链式写法
$(this).animate({left:"500px"},3000);
        .animate({height:"500px"},3000);

综合动画

【动画回调函数】

可以使用回调函数（callback）对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可：

$("pane1").click(function(){
    $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
              .animate({top:"200px",width:"200px"},3000)
               $(this).css("border","5px solid blue");
            })
});

callback回调函数适用于jQuery所有的动画效果方法。

【停止动画和判断是否处于动画状态】

停止元素的动画：stop()方法。语法结构：stop([clearQueue],[gotoEnd]);参数clearQueue和gotoEnd都是可选参数，为Boolean值。clearQueue代表是否要清空未执行完的动画队列，gotoEnd代表是否直接将正在进行的动画跳转到末状态。

判断元素是否处于动画状态：

if(!$(element).is(":animated")){   //判断元素是否正处于动画状态
      //如果当前没有进行动画，则添加新动画
}

延迟动画：delay()方法。可以将队列中的函数延迟执行。它既可以推迟动画队列中函数的执行，也可以用于自定义队列。

【其他动画方法】

toggle()方法：切换元素的可见状态。

slideToggle()方法：通过高度变化来切换匹配元素的可见性。

fadeTo()方法：可以把元素的不透明以渐进方式调整到指定的值。

fadeToggle()方法:通过不透明度来切换匹配元素的可见性。

【动画方法概括】

特别注意animate()方法，可以使用它来替代其他所有的动画方法。详情在《锋利的jQuery》P132页。