快捷动画效果
常见动画操作如下:
动画名 | 说明 |
---|---|
show | 让元素出现 |
hide | 隐藏元素 |
toggle | 切换元素出现与隐藏 |
slideDown | 元素滑入,类似放下卷门帘 |
slideUp | 元素滑出,类似上卷门帘 |
slideToggle | 切换元素的滑入滑出 |
fadeIn | 元素渐现 |
fadeOut | 元素渐隐 |
fadeToggle | 切换元素的淡入淡出效果 |
上述方法均接受三个可选参数:duration、timing-function、fn,三个参数与 animate 动画的参数效果一致,不再赘述。
补充:还有一个 $ele.fadeTo(时长, 透明度)
的方法可以快捷的给元素添加透明度动画。
Tips:让元素出现和隐藏的动画默认是直接改变元素的 display 属性的,即闪现动画。添加上时间才能看到动画过程。
例:
<style>
.box{
position: absolute;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
background-color: #f00;
}
</style>
<body>
<div class="box"></div>
<button>show</button>
<button>hide</button>
<button>toggle</button>
<button>slideDown</button>
<button>slideUp</button>
<button>slideToggle</button>
<button>fadeIn</button>
<button>fadeOut</button>
<button>fadeToggle</button>
<button>fadeTo</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var $box = $(".box");
$("button:eq(0)").click(function (){
$box.show(1000, function (){
console.log("出现了");
$box.animate({
backgroundColor: "#00f"
})
});
})
$("button:eq(1)").click(function (){
$box.hide(1000, function (){
console.log("消失了");
});
})
$("button:eq(2)").click(function (){
$box.toggle(1000);
})
$("button:eq(3)").click(function (){
$box.slideDown(1000);
})
$("button:eq(4)").click(function (){
$box.slideUp(1000);
})
$("button:eq(5)").click(function (){
$box.slideToggle(1000);
})
$("button:eq(6)").click(function (){
$box.fadeIn(1000);
})
$("button:eq(7)").click(function (){
$box.fadeOut(1000);
})
$("button:eq(8)").click(function (){
$box.fadeToggle(1000);
})
$("button:eq(9)").click(function (){
$box.fadeTo(1000, .2);
})
</script>
</body>