首页 > 代码库 > jq动画
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动画
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。