JQ动画效果
显示 / 隐藏
- 方法1:
使用 -1 或 1 来控制元素的显示隐藏
var flag= 1;
$(".btn:first").click(function () {
flag *= -1;
if(flag == "-1"){
// 目标.hide() 让目标隐藏(修改的display属性)
// 小括号中,可是设置动画执行的时间
$(".box").hide('slow');
}else{
// 目标.show() 让目标显示
// 小括号中,可以设置动画执行的时间
$(".box").show(5000);
}
})
- 方法2:
使用 toggle 来控制元素的显示隐藏
$("#taggle").click(function () {
//目标.toggle()
// 会先进行目标的属性,如果是显示,就设置为隐藏
// 如果是隐藏,就设置为显示
$(".box").toggle(2000);
});
淡入 / 淡出
- 淡入
$(".btn:eq(1)").click(function () {
$(".box").fadeIn(2000); // 动画执行时间
})
- 淡出
$(".btn:eq(2)").click(function () {
$(".box").fadeOut(2000); // 动画执行时间
})
- 淡入 /淡出
$(".btn:eq(3)").click(function () {
$(".box").fadeToggle(2000); // 动画执行时间
})
滑入 / 滑出
- 滑入
$(".btn:eq(5)").click(function () {
$(".box").slideDown(2000); // 动画执行时间
});
- 滑出
$(".btn:eq(6)").click(function () {
$(".box").slideUp(2000); // 动画执行时间
});
- 滑入 / 滑出
$(".btn:eq(7)").click(function () {
$(".box").slideToggle(2000); // 动画执行时间
});
渐变到指定的透明度
$(".btn:eq(4)").click(function () {
//参数1 : 执行的时间
//参数2 : 指定的透明度
$(".box").fadeTo(2000,0.3);
})
animate动画(自定义动画)
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
只有数字值可创建动画(比如 “margin:30px”)。字符串值无法创建动画(比如 “background-color:red”)。
目标.animate({参数1},参数2,参数3)
- 参数1
对象{ },一系列要实现的样式 - 参数2
时间,单位毫秒 - 参数3
函数function(){
参数1,实现后要执行的功能
}
// 例
$(".text:first").animate({
opacity: 1,
fontSize: "40px"
},1000,function(){
$(this).animate({ fontSize: "30px" },800,function(){
$(this).addClass("cc");
})