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>
    

@H_126_45@

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怎样实现简单的动画效果？（实例详解）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！