jQuery怎样实现简单的动画效果？（实例详解）

124 阅读 0 评论 82 点赞

我是靠谱客的博主长情荷花，这篇文章主要介绍jQuery怎样实现简单的动画效果？（实例详解），现在分享给大家，希望可以做个参考。

本篇文章我们来看一下怎样利用jquery来实现一些简单的动画效果，通过jquery可以实现简单的显示隐藏、收缩展开、淡入淡出还有简单的自定义动画，希望对大家有帮助！

jQuery 实现简单的动画

1、显示/隐藏

(1)显示：

复制代码show(speed,[callback])1
show(speed,[callback])
登录后复制

speed:效果时长。可取的值：slow、fast、毫秒数

callback:过渡完成后，所执行的方法名称

(2)隐藏：

复制代码hide(speed,[callback])1
hide(speed,[callback])
登录后复制

(3)交替：

复制代码toggle(speed,[callback]),1
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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//搭建结构
 <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])1
slidUp(speed,[callback])
登录后复制

(2)展开：

复制代码slidDown(speed,[callback])1
slidDown(speed,[callback])
登录后复制

(3)交替：

复制代码slidToggle(speed,[callback])1
slidToggle(speed,[callback])
登录后复制

示例如下：

复制代码 $('#btn_up').bind('click',function(){
                $('#img2').slideUp();  //展开
            })
             $('#btn_down').bind('click', function () {
                $('#img2').slideDown(); //收缩
            })
             $('#btn_slide').bind('click', function () {
                $('#img2').slideToggle();  //收缩展开交替
            })1
2
3
4
5
6
7
8
9
$('#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])1
fadeIn(speed,[callback])
登录后复制

(2)淡出：

复制代码fadeOut(speed,[callback])1
fadeOut(speed,[callback])
登录后复制

(3)淡入淡出交替：

复制代码fadeToggle(speed,[callback])1
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);  //淡入淡出交替
            })1
2
3
4
5
6
7
8
9
$('#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])1
$(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)
            })
        })1
2
3
4
5
6
7
8
9
$(function(){
            $('button').click(function(){
                $('.bt').animate({
                    left:200,
                    top:150,
                    opacity:0.4
                },1000)
            })
        })
登录后复制

输出结果：

+2.gif