jQuery怎样实现简单的动画效果？（实例详解）
- WBOY转载
- 2021-12-17 19:02:013429浏览
本篇文章我们来看一下怎样利用jquery来实现一些简单的动画效果，通过jquery可以实现简单的显示隐藏、收缩展开、淡入淡出还有简单的自定义动画，希望对大家有帮助！
jQuery 实现简单的动画
1、显示/隐藏
(1)显示：
show(speed,[callback])
speed:效果时长。可取的值：slow、fast、毫秒数
callback:过渡完成后，所执行的方法名称
(2)隐藏：
hide(speed,[callback])
(3)交替：
toggle(speed,[callback]),
若'显示'则'隐藏';
若'隐藏'则显示
示例如下：
//搭建结构
<button id="btn_show">显示图片</button>
<button id="btn_hide">隐藏图片</button>
<button id="btn_toggle">交替显示隐藏</button>
<img src="../素材/im2.jpg" alt="" width="200" height="200" id="img1">
<script>
$('#btn_show').bind('click',function(){
$('#img1').show(3000); // 3秒之内显示
})
$('#btn_hide').bind('click', function () {
$('#img1').hide(1000); // 1秒之内隐藏
})
$('#btn_toggle').bind('click', function () {
$('#img1').toggle(); // 显示或隐藏
})
</script>
2、向上收缩/向下展开
(1)收缩：
slidUp(speed,[callback])
(2)展开：
slidDown(speed,[callback])
(3)交替：
slidToggle(speed,[callback])
示例如下：
$('#btn_up').bind('click',function(){
$('#img2').slideUp(); //展开
})
$('#btn_down').bind('click', function () {
$('#img2').slideDown(); //收缩
})
$('#btn_slide').bind('click', function () {
$('#img2').slideToggle(); //收缩展开交替
})输出结果：
3、淡入/淡出
(1)淡入：
fadeIn(speed,[callback])
(2)淡出：
fadeOut(speed,[callback])
(3)淡入淡出交替：
fadeToggle(speed,[callback])
示例如下：
$('#btn_fadeIn').bind('click', function () {
$('#img3').fadeIn(); //淡入
})
$('#btn_fadeOut').bind('click', function () {
$('#img3').fadeOut(); //淡出
})
$('#btn_fade').bind('click', function () {
$('#img3').fadeToggle(2000); //淡入淡出交替
})
4、自定义动画
$(selector).animate(params,[speed],[easing],[fn])
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
示例如下：
$(function(){
$('button').click(function(){
$('.bt').animate({
left:200,
top:150,
opacity:0.4
},1000)
})
})输出结果：
相关视频教程推荐：jQuery视频教程
以上是jQuery怎样实现简单的动画效果？（实例详解）的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文转载于：csdn.net。如有侵权，请联系admin@php.cn删除