jq动画
Posted 涤荡轮回
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jq动画相关的知识,希望对你有一定的参考价值。
JQ动画
1、show()和hidde()
显示和隐藏
$("#btn").toggle(function (){
//先隐藏掉
$("#div"\').hide(\'slow\');
},function(){
//再显示出来
$("#div").show(\'slow\');
});
2、slideUp()和slideDown()
滑动隐藏和滑动显示
slideUp(speed,回调函数)
通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏起来。
slideDown(speed,回调函数)
通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来
$("#btn").toggle(function (){
$("#div"\').slideUp();
},function(){
$("#div").slideDown();
});
3、fadeOut()和fadeIn()
淡入淡出
fadeIn(speed,回调函数) 方法使用淡入效果来显示被选元素,(该元素是隐藏的);
fadeOut(speed,回调函数)通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
$("#btn").toggle(function (){
$("#div").fadeIn(\'slow\');
},function(){
$("#div").fadeOut(\'slow\');
});
说明:
三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000);
回调函数是指时间结束后执行的函数。
4、自定义动画 .animate() 参数1:要达到的样式 ;参数2:时间 ;参数3:回调函数
$(this).stop().animate({ "height":40) }, 500);//stop()阻止动画累积
5、颜色渐变
注意:引入文件放在JQuery后面
$(this).animate({"background-color":"#2c24f5"},500);//这句代码会将原来的背景色渐变为#2c24f5
以上是关于jq动画的主要内容,如果未能解决你的问题,请参考以下文章