jQuery 动画效果

2021年04月05日 16:22 · 阅读 127

jQuery 效果函数

方法	描述
animate()	对被选元素应用“自定义”的动画
clearQueue()	对被选元素移除所有排队的函数（仍未运行的）
delay()	对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()	运行被选元素的下一个排队函数
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
hide()	隐藏被选的元素
queue()	显示被选元素的排队函数
show()	显示被选的元素
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	对被选元素进行滑动隐藏和滑动显示的切换
slideUp()	通过调整高度来滑动隐藏被选元素
stop()	停止在被选元素上运行动画
toggle()	对被选元素进行隐藏和显示的切换

jquery特殊效果

下面的这些动画的方法,一般都可以使用两个参数（也可以不传）

参数1speed: 动画的速度，单位毫秒。三个预定义的值(slow 慢,normal 正常,fast 快）
参数2: 指定切换效果
- swing：动画执行时效果是先慢，中间快，最后又慢
- linear：动画执行时速度是匀速的
参数3: 回调函数，在动画完成时执行的函数，每个元素执行一次

.show([speed,[easing],[fn]])               显示
.hide([speed,[easing],[fn]])               隐藏
.toggle([speed],[easing],[fn])             切换

.slideUp([speed,[easing],[fn]])            滑入(上)
.slideDown([speed],[easing],[fn])          滑出(下)
.slideToggle([speed],[easing],[fn]))       切换滑入和滑出

.fadeIn([speed],[easing],[fn])             淡入 
.fadeOut([speed],[easing],[fn])            淡出 
.fadeToggle([speed,[easing],[fn]])         切换淡入淡出

.fadeTo(([speed,透明值，[fn])               改变透明度
.stop()                                    停止动画

.animate(css属性的键值对,[时间(毫秒)],[fn])   动画的方法
复制代码

<style>
  div { width: 0;height: 0;background-color: palevioletred; }
</style>
<div></div>

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  $('div').animate({
    width: 500,
    height: 500,
  }, 1000, 'swing', function () {
    alert('done!')
  })  
</script>
复制代码

参数可以写成数字表达式：

<style>
  div { width: 0;height: 0;background-color: palevioletred; }
</style>
<div></div>

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  $('div').animate({
    width: '+=500',
    height: '500',
  }, 1000, 'swing', function () {
    alert('done!')
  })  
</script>
复制代码

stop()

<body>
  <p><button id="start">Start Animation</button><button id="stop">Stop Animation</button></p>
  <div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">
  </div>
</body>

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    $("#start").click(function () {
      $("#box").animate({ height: 300 }, 2000);
      $("#box").animate({ height: 100 }, 2000);
    });
    
    $("#stop").click(function () {
      $("#box").stop();
    });
  });
</script>
复制代码