show()和隐藏hide() slideDown()和 slideUp() fadeIn()和fadeOut()


1==>显示show()和隐藏hide() 是一组动画 与切换toggle()
$("div").show();当不传递参数时,没有动画效果,它将某个元素瞬间显示出来

$("div").hide(100); 100ms后隐藏起来
这一组动画还可以传递回调函数,等待动画执行完毕后,在执行回调函数。

$("div").show(1000,function(){
console.log("aa"); //等动画执行完毕之后,就会触发这个函数
});

toggle()在以上两种状态之间不断的切换

总结:show()和hide()用法是一致的


2==>slideDown()是从上往下滑出,(滑入)慢慢的显示出来。如果不传递参数 也有动画效果
slideUp()是从下往上滑出,(滑出)慢慢的显示出来。
这一组动画也可以传递回调函数,等待动画执行完毕后,在执行回调函数。
slideDown()和slideUp()用法一致

$("div").slideDown(1000,function(){
console.log("aa"); //等动画执行完毕之后,就会触发这个函数
});

有没有一个方法,是滑入状态,就执行滑出。 是滑出状态,就执行滑入。用slideToggle()
$("div").slideToggle(); //在2种状态之间不停的切换



3==>淡入:fadeIn() 慢慢的显示出来,透明度从0-->1
淡出:fadeOut() 慢慢的消失,透明度慢慢下降,从1-->0
切换:fadeToggle() 在以上两种状态之间不断的切换

$("div").fadeIn(1000); 慢慢的显示出来(在1s类慢慢显示出来)

总结:这三组动画用法一致
原文地址:https://www.cnblogs.com/IwishIcould/p/10428139.html