jQuery学习之动画

一，show()和hide()

show()和hide()方法在不带任何参数的情况，相当于css(“display”，“none/block/inline”)，

作用是立即隐藏或显示匹配的元素，不会有任何动画。

如果需要带动画，可以向show()方法中，加入参数

exp:$('#id').show("slow");

       $('#id').show(1000);//1000毫秒，相当于1秒

二，fadeIn()和fadeOut()

这两个方法只改变元素的透明度，fadeOut()在指定的一段时间内降低元素的不透明度，直到

元素完全消失("display:none")；fadeIn()正好相反。

三，slideUp()和slideDown()

这两个方法只会改变元素的高度

四，自定义动画animate()

可以自定义动画，同时改变元素的高度，宽度，不透明度。

animate(params,speed,callback)

params:一个包含样式属及值得映射{property1:"value1",property:"value2"}

speed:速度参数，可选

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

$(function(){

      $("#panel").click(function(){

                  $(this).animate({left:"+=500px"},300);  //在当前位置累加500px

});

})

五，动画回调函数

动画最后一步时改变元素的样式

$(function(){

      $("#panel").click(function(){

                  $(this).animate({left:"+=500px",opacity:"1"},300);

                               .animate ({top:"200px",width:"200px"},3000,function(){

                                    $(this).css("border","5px solid blue");

});

})

六，停止动画和判断是否处于动画状态

1,停止元素的动画

stop([clearQueue],[gotoEnd])

clearQueue 是否清空未执行的动画队列

gotoEnd     是否直接将正在执行的动画跳转到末状态

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

if(!$(element).is(":animated")){

  //如果当前没有进行动画，则添加新的元素

}

3，延迟动画 delay()

七，其他动画方法

toggle()

切换可见状态

slideToggle（）

通过高度变化切换元素的可见性

fadeTo()

可以把元素的不透明度以渐进的方式调整到指定值

fadeToggle

通过透明度的方式切换元素的可见性

转载于:https://www.cnblogs.com/fnncat/p/4885859.html