【jQuery】jQuery基础动画总结

jQuery基础动画详解

最新推荐文章于 2023-08-27 21:12:31 发布

原创最新推荐文章于 2023-08-27 21:12:31 发布 · 381 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #动画

jQuery 专栏收录该内容

8 篇文章

订阅专栏

这篇博客总结了jQuery的基础动画效果，包括隐藏和显示、下拉上卷、淡入淡出以及自定义动画。强调了动画的异步性质和回调函数的重要性。内容详细介绍了各个动画方法的用法和参数，如toggle、slideToggle、fadeIn/fadeOut以及自定义动画的properties设置，同时也提到了如何停止和控制动画的执行顺序。

注意：动画基本都是异步的，所以在动画执行之后的某些操作就必须要写到回调函数里

1.动画基础隐藏和显示

注意：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性

$elem.hide()
$elem.hide(options) options含有时间参数，单位毫秒，fast和slow分别代表 200和600，也可以是easing等这些
$elem.show() 和hide()用法一致，效果相反
$elem.toggle([duration ] ，[options],[complete] ); hide和show的相互切换，duration是持续时间，complete为完成时执行的函数

2.下拉上卷效果

注意：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性

.slideDown( [duration ] ,[easing ],[complete ] )，下拉动画，初始状态应为display:none
.slideUp( [duration ] ,[easing ] ,[complete ] ) 上卷动画，参数解释在文章开头
.slideToggle( [duration ] ,[ complete ] ) 下拉上卷的切换动画

3.淡入淡出效果

注意：隐藏的元素，display:none，不会在影响页面的布局

.fadeOut( [duration ], [ complete ] ) 淡出动画 opacity=>1-0
.fadeIn( [duration ], [ complete ] ) 淡入动画 opacity=>0-1
.fadeToggle( [duration ] ,[ complete ] ) 淡入淡出动画切换
.fadeTo（[duration ]，endOpactiy，[complete]）opactiy => start-endOpacity

4.自定义动画

.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options )
properties：一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的，fontSize可以，font-size不可以，默认单位是px，也可以自己指定em,%。

一些常用写法如下：

one:
$(elem).animate({   
	.animate({
    left: 50, 
    height: "toggle",
    width: '+=50px',
    opacity: 'show',  
    fontSize: "10em"
}, 500);
two:
//如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次
$('#elem').animate({
    width: 'toggle',  
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });

停止动画

在一个元素上同时有多个动画的情况下
.stop() 停止当前动画，执行下一个动画，点击在暂停处继续开始
.stop(true) 停止当前和所有动画，直至当前动画运行完
.stop(true,true) 当前动画将停止，且当前动画立刻被改为目标值，后续动画继续执行

例如：
$("#aaron").animate({
    height: 300
}, 5000)
$("#aaron").animate({
    width: 300
}, 5000)
$("#aaron").animate({
    opacity: 0.6
}, 2000)
1.stop()：只会停止第一个动画，第二个第三个继续
2.stop(true)：停止第一个、第二个和第三个动画
3.stop(true ture)：停止动画，直接跳到第一个动画的最终状态