jquery第三天

最新推荐文章于 2024-11-02 19:19:35 发布

XiaLuoCXY

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量306

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/XiaLuoCXY/article/details/122281074

版权

本文详细介绍了jQuery中常见的几种动画效果，包括显示/隐藏、滑入/滑出、淡入/淡出以及自定义动画。通过示例代码展示了如何使用这些方法，并解释了它们的参数和用法。此外，还提到了动画队列的管理和停止动画的方法，帮助开发者更好地控制页面元素的动态展示。

摘要由CSDN通过智能技术生成

显示与隐藏

<body>
    <input type="button" value="显示" id="show" />
    <input type="button" value="隐藏" id="hide" />
    <input type="button" value="切换" id="toggle" /> <br /><br />
    <div id="div1"></div>
    <br /><br />
    <div id="div2"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        //显示 $().show()
        $('#show').on('click',function(){
            /**
            * @description:
            * @param {number|string} 动画时长
                * 如果没有动画时间，则没有动画
                * number单位 毫秒
                * 'fast' 200 | 'normal' 400 | 'slow' 600
            * @param {function} 动画完成回调(类似于于定时器)
            * @return: jq对象(链式编程)
            */
            $('div').show(2000,function(){
                console.log(('1111'))
            })
        })

        //隐藏 $().hide()
        $('#hide').on('click',function(){
            //hide()所有用法与show()完全一致，只是动画效果相反
            $('div').hide(2000,function(){
                console.log(('22222'))
            })
        })

        //切换 $().toggle()
        $('#toggle').on('click',function(){
            /* $().toggle() 
            display:block, 则执行hide()隐藏
            display:none, 则执行show()显示
            */
           $('div').toggle('')
        })
    </script>
</body>

滑入与滑出

<body>
    <input type="button" value="滑入" id="slideDown" />
    <input type="button" value="滑出" id="slideUp" />
    <input type="button" value="切换" id="slideToggle" /><br /><br />
    <div id="div1"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
       //滑入 $().slideDown()
       $('#slideDown').on('click',function(){
            //滑入滑出所有的语法与 show()/hide()一致的
            //唯一区别： 不传参数，默认动画时长400ms
            $('div').slideDown(2000,function(){
                alert(1111)
            })
       })

       //滑出 $().slideUp()
       $('#slideUp').on('click',function(){
            $('div').slideUp(2000,function(){
                alert(22222)
            })
       })

       //滑入/滑出切换 $().slideToggle()
       $('#slideToggle').on('click',function(){
           /* 
           高度为0 : 则滑入 slideDown
           高度不是0 : 则滑出 slideUp
           */
           $('div').slideToggle()
       })
    </script>
</body>

淡入与淡出


<body>
    <input type="button" value="淡入" id="fadeIn" />
    <input type="button" value="淡出" id="fadeOut" />
    <input type="button" value="切换" id="fadeToggle" />
    <input type="button" value="淡入到指定透明度" id="fadeTo" /><br /><br />
    <div id="div1"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>

        //淡入 $().fadeIn()
        $('#fadeIn').on('click', function () {
            //淡入淡出与滑入滑出所有的用法一致，只是动画效果不同
            $('div').fadeIn(2000,function(){
                alert('11111')
            })
        })

        //淡出 $().fadeOut()
        $('#fadeOut').on('click', function () {
            $('div').fadeOut(2000,function(){
                alert('22222')
            })
        })

        //切换 $().fadeToggle()
        $('#fadeToggle').on('click', function () {
            /* 
            透明度为0 ： 则淡入fadeIn()
            透明度不为0 ： 则淡出fadeOut()
            */
           $('div').fadeToggle()
        })

        //淡入到指定透明度 $().fadeTo()
        $('#fadeTo').on('click', function () {
            //第一个参数：动画时间
            //第二个参数： 目标透明度
            //第三个参数：完成回调
            $('div').fadeTo(2000,0.5,function(){
                alert('33333')
            })
        })
    </script>
</body>

自定义动画


<body>
    <input type="button" value="从左到右800" id="btn" />
    <div id="div1"></div>
    <div id="div2"></div>
    <script src="jquery-1.12.4.js"></script>
    <!-- 导入jq颜色插件 -->
    <script src="./jquery.color.js"></script>
    <script>
        $('#btn').on('click',function(){
            /**
            * @description:
            * @param {object} 动画属性对象 
            * @param {duration} 动画时间
            * @param {string} 动画速度  默认缓动：'swing'   匀速:'linear'
            * @param {function} 动画完成回调
            * @return: jq对象(支持链式编程)
            */
            $('#div1').animate({
                width:300,
                height:300,
                backgroundColor:'purple'
            },2000,function(){
                //动画完成回调
                $('#div1').animate({
                    left:300,
                    top:300,
                    width:200,
                    height:200
                })
            })

        })
    </script>
</body>

动画队列

<body>
    <input type="button" value="开始动画" id="start" />
    <input type="button" value="停止动画" id="stop" /> <br /><br />
    <div></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
       /* 
       1.动画队列 ： jq的动画会按照顺序依次执行
       */

       $('#start').on('click',function(){
           $('div').slideDown(2000).slideUp(2000)
       })

       //结束动画队列
       $('#stop').on('click',function(){
           /* 
           第一个参数：是否清除队列
              true:清除。 后面的动画不执行
              false:不清楚。 后面的动画还是会执行
           第二个参数：是否跳转本次最终结果
               true:跳转。 动画会立即跳转到最终状态
               false:不跳转。 动画会停留在原地 
           */
           $('div').stop(true,false)
       })
    </script>
</body>