jQuery中的动画

2019-09-21 19:57:09 阅读：231 来源： 互联网

标签：jQuery 动画 width 参数 animate div 200px

jQuery -动画

jQuery动画分为三个部分，非自定义动画，自定义动画，和全局动画设置。

一、非自定义动画： 　　1.显示、隐藏： 　　show( ) 、hide( )、toggle() 　　　　两种用法：1）不传参数，代表直接显示隐藏。　　　　　　　　　2）向方法中传递一个参数，这个参数为number类型，代表动画的执行时间。会有显示隐藏的动画效果。　　　　　　示例:show(100)、hide(100)、toggle(100) 　　　　　　除此之外，jQuery还为动画方法提供了三种字符串形式的参数：fast、slow、和空字符串'' 　　　　　　示例:show('fast')、hide('slow')、toggle('') 　　　　　　　　　　三种参数的执行时间分别为：'fast' ：200毫秒 ''(默认值):400毫秒 'slow'：600毫秒　　2.滑动： 　　slideUp()：向上滑动（隐藏）　　slideDown():向下滑动（显示）　　slideToggle()：滑动（自动）　　3.淡入淡出： 　　fadeOut():淡出（隐藏）　　 fadeIn():淡入（显示）　　fadeToggle():显示隐藏（）自动　　　 fadeTo()，该方法接受两个参数。　　　　　　　　参数1是动画执行的时间，参数2是期望达到的透明度。 二、自定义动画 　　animate()方法 　　animate()方法有三个参数。分别是动画目标(target),动画执行时间，回调函数。只有第一个参数是必填参数。　　　　 animate()方法的使用：　　将元素属性变换为自定义动画中的目标属性，所有参数中的属性一起改变。

animate({
        'width':'200px'，
        'height':'200px'
    })

　　设置的属性，支持运算。

animate({
        'width':'+=200px'
    })

如果想要动画按照顺序执行（执行完第一个动画之后，再执行下一个动画）有三种方法：

　　1）借助动画的回调函数（操作不同元素的时候，推荐使用回调函数）

$('input').click(function(){
    $('div').animate({
        'width':'400px',
        'height':'400px',
    },function(){
        $('div').animate({
            'width':'200px',
            'height':'200px'
        })
    })
})

　　2）将动画效果分开写

$('input').click(function(){
    $('div').animate({
        'width':'400px',
        'height':'400px',
    })
    $('div').animate({
        'width':'200px',
        'height':'200px'
    })
})

　　3）连缀（操作同一元素的时候，推荐使用连缀）

$('input').click(function(){
    $('div').animate({
        'width':'400px',
        'height':'400px',
    }).animate({
        'width':'200px',
        'height':'200px'
    })
})

三、动画及相关方法

　　1.stop()方法 　　　　这个方法是停止动画的方法，他有两个参数，都是布尔值。　　　　　　参数1：代表是否清除动画队列；参数2：代表是否直接运行到最后结果　　2.delay()方法 　　　　延时执行，该方法有一个参数，是延时执行的毫秒数。　　3.动画的递归

$('div').slideToggle(2000,recursion)

function recursion(){
    $(this).slideToggle(2000,recursion)
}

　　　　附赠个高级写法：

$('div').slideToggle(2000,function(){
    $(this).slideToggle(2000,arguments.callee)
})

//arguments.callee：常用在匿名函数中， 代表当前的函数。

jQuery的动画，以上。

标签：jQuery,动画,width,参数,animate,div,200px
来源： https://www.cnblogs.com/xiaomala/p/11564332.html

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

ICode9

jQuery中的动画