5 jQuery 动画

2022-08-05 17:31:06 阅读：130 来源： 互联网

标签：jQuery 动画 hide function box 400 1000

jQuery 中的任何动画效果，都可以指定三种速度参数，slow、 normal、 fast，对应的时间⻓长度分别是 0.6 秒，0.4 秒和 0.2 秒，也可以传⼊入参数，传⼊入数字作为参数不不需要加引号，使⽤用关键字需要加引号。

动画队列列
当⼀一个 animate() ⽅方法中应⽤用多个属性时，动画是同时发⽣生的。当以链式⽅方法调⽤用时，动画是按顺序发⽣生（除⾮非 queue 选项为 false ）。默认情况下，动画都是同时发⽣生的。当以回调的形式应⽤用动画⽅方式时，按照回调顺序发⽣生。

停⽌动画

stop([clearQueue,gotoEnd])

clearQueue 是否要清空未执⾏行行的动画队列列 gotoEnd 是否直接跳转到末状态

判断元素是否处于动画状态
要始终避免动画累计⽽而导致的动画与⽤用户⾏行行为不不一样的情况。当用户快速在某个元素上执行行 animate() 时，就会出现动画累加。解决方法是判断元素是否处于动画状态，如果用户不不处于动画状态，才为元素添加新的动画，否则不不添加。

延迟动画
在动画执⾏行行的过程中，如果想对动画进⾏行行延迟操作，那么
可以使⽤用 delay() 方法。

<button id="btn">隐藏</button>
<div class="box" style="width: 200px;height: 200px;background: red"></div>
<script>
    $(function () {
        $('#btn').click(function () {
            //hide() 中可以传入'slow'，'normal'，'fast'
            $('.box').stop().hide(1000); //隐藏
            //fadeOut() 淡出
            $('.box').fadeOut(1000);
            //fadeIn() 淡入
            $('.box').fadeIn(1000);
            //slideUp() 上拉
            $('.box').slideUp(1000);
            //slideDown 下拉
            $('.box').slideDown(1000);
            //fadeTo() 透明度
            // fadeTo(毫秒,透明度,函数)
            $('.box').fadeTo(400,0.3);

            //合成事件
            //toggle() 仅仅是显示和隐藏使用toggle
            $('.box').toggle(400);

            //fadeToggle() 淡入淡出效果
            $('.box').fadeToggle(400);

            //slideToggle() 上拉下拉效果
            $('.box').slideToggle(400);

            //自定义动画 
            //animate('对象'，'时间'，'函数')
            $('.box').animate({
                width:300,
                height:300,
                //颜色 需要jQuery的颜色插件配合，百度搜索jQuery-color 在引入到script
                //background:'green',
                'font-size':40
            },1000,function () {
                width:200,
                height:200,
                'font-size':30
            },1000,function(){
                $('.box').trigger('click'); //重复执行自定义动画效果
            })
        })
    })
</script>

hide & show

<div class="box" style="width: 200px;height: 200px;background: red"></div>
<script>
    $(function () {
        $('.box').mouseenter(function () {
            $(this).stop().hide(500); //隐藏  hide 可添加回调函数
        })
        $('.box').mouseleave(function () {
            $(this).stop().show(500); //显示 show 可添加回调函数
        })
</script>

标签：jQuery,动画,hide,function,box,400,1000
来源： https://www.cnblogs.com/it-lkp/p/16555169.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

5 jQuery 动画