jQuery 动画效果

·  阅读 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>
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改