一、jQuery动画
1、显示与隐藏
显示与隐藏
show() 方法显示隐藏的被选元素
jquery对象.show(参数1,参数2)
hide() 方法隐藏被选元素
jquery对象.hide(参数1,参数2)
toggle() 方法切换元素的可见状态
jquery对象.toggle(参数1,参数2)
参数1:可选 持续时间 数字 (单位默认毫秒)/字符串(normal 400 fast 200 slow 600)
参数2:可选 回调函数 动画执行完毕后调用的函数
$(".box h2").click(function () {
var list = $(this).next(".list"); //当前点击的h2后的那一个ul
list.toggle(200);
list.show(5000, function () {
$(this).hide(2000); //指向的是有动画的jquery对象
});
$(this).next(".list").hide(5000);
});
});
2、滑上和滑下
滑上/滑下
slideUp() 方法以滑动方式隐藏被选元素
jquery对象.slideUp(参数1,参数2)slideDown() 方法以滑动方式显示被选元素
jquery对象.slideDown(参数1,参数2)slideToggle()方法在被选元素上进行slideUp()和slideDown()之间的切换
jquery对象.skideToggle(参数1,参数2)
参数1:可选 持续时间 数字 (单位默认毫秒)/字符串(normal 400 fast 200 slow 600)
参数2:可选 回调函数 动画执行完毕后调用的函数
$(".nav li").bind({
mouseenter: function () {
$(this).addClass("on");
$(this).children(".subnav").stop().slideDown();
},
mouseleave: function () {
$(this).removeClass("on");
$(this).children(".subnav").stop().slideUp();
},
});
3、淡入与淡出
淡入与淡出
fadeIn() 方法逐渐改变被选元素的不透明度,从隐藏到可见
jquery对象.fadeIn(参数1,参数2)fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏
jquery对象.fadeOut(参数1,参数2)fadeToggle()方法在fadeIn()和fadeOut()方法之间切换
jquery对象.fadeToggle(参数1,参数2)fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值
jquery对象.fadeTo(参数1,参数3,参数2)
参数3:不透明度淡入或淡出到某一不透明
参数1:可选 持续时间 数字(单位默认毫秒)/字符串(normal 400 fast 200 slow 600)
参数2:可选 回调函数 动画执行完毕后调用的函数
$(".cal").click(function () {
$(".box,.mask").fadeIn();
});
$(".mask span").click(function () {
$(".box,.mask").fadeOut();
});
4、自定义动画
自定义动画
animate() 方法执行 CSS 属性集的自定义动画
jquery对象.animate(参数1,参数2,参数3)
参数1:对象 css属性
参数2:持续时间
参数3:回调函数
$(".box")
.animate({ left: "800px" }, 2000)
.animate({ top: "400px" });
5、停止动画
停止动画
stop() 方法为被选元素停止当前正在运行的动画
jquery对象.stop(参数1,参数2)
参数1:可选 是否停止被选元素的所有加入队列的动画 ,布尔值 默认false
参数2:可选 规定是否立即完成当前的动画 布尔值 默认是false
$(".nav li").bind({
mouseenter: function () {
$(this).addClass("on");
$(this).children(".subnav").stop().slideDown();
},
mouseleave: function () {
$(this).removeClass("on");
$(this).children(".subnav").stop().slideUp();
},
});
6、延迟动画
延迟动画
delay() 方法对队列中的下一项的执行设置延迟
jquery对象.delay(延迟时间)
$(".cal").click(function () {
$(".box,.mask").delay(400).fadeIn();
});