jquery动画效果总结

Posted 2020-07-14 代码改变生活

一.jquery的动画速度fast-slow对应着600ms,200ms,不写是400ms

二.禁用jquery的动画

将jQuery.fx.off设置为true即可

    $(".stopping").click(function(){
        jQuery.fx.off = true;//禁用所有jquery的动画
    })

三.jquery动画是异步的调用动画方法时会立刻返回,动画则在"后台"执行,也就是方法会在动画之前完成,所以可以给动画方法添加第二个参数

$("#message").fadeIn("slow",function(){
    $(this).text("动画执行后再修改的内容");
});

四.jquery动画还可以传入一个对象来调用动画方法

//$("#message").fadeIn({
//    duration: "fast",
//    complete: function(){
//    $(this).text("动画执行后再修改的内容");
//});

五.简单动画fadeIn,fadeOut,fadeTo

需要传入一个opacity目标值,fadeTo会将元素的当前opacity值变化到目标值,调用fadeTo的方法时,第一参数必须是时长(或选项对象),第二参数是opacity目标值,回调函数是可选的第三个参数

$("#message").fadeTo("0.5","0.1");

　　　　　show,hide toggle

注意:fadeOut让元素不可见,但依然保留了隐藏元素在文档中的占位

　　hide方法则会将元素从布局中移除等同于display:none一样

toggle()可以改变在上面调用它的元素的可视状态,隐藏调用show(),显示则调用hide,必须传入时长或选线对象给toggle来产生动画效果,

参数true等同show(),参数false等同hide(),如果传入两个或多个函数参数给toggle(),则会注册为事件处理程序.

　　　　slideDown(),slideUp(),slideToggle()

slideUp()会因此jquery中的元素,将其高度变化到0,再设置display的属性为none,slideToggle()来切换可见性,

$("#img").click(function(){
$("#img").slideToggle("800");
});

$("#img").fadeOut().show(300).slideUp().slideToggle();
})

六.自定义动画

animate()有2个参数,第一个是必须的,必须是一个css对象,该对象的属性指定要变化的css属性和他们的目标值.比如上面表述的slideUp()效果可以用一下代码代替

$("img").animate({height: 0px});

第二个参数是可选的,可以传入一个选项对象给animate()方法