Learning Notes

# jQuery动画相关函数

  • # .hide() 用于隐藏元素

.hide([duration ] [,easing ] [,complete ])

duration (default: 400) Type: Number or String 一个字符串或者数字决定动画将运行多久。（注：默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000) ） easing (默认: swing) 类型: String 一个字符串，表示过渡使用哪种缓动函数。 complete 类型: Function() 在动画完成时执行的函数。

 $('.box').hide('fast');      //等同于 $('.box').css('display', 'none')
 $('.box').hide(3000, function() {
    alert('Animation complete.')
 })
 $('#book').hide(3000, 'linear', function() {
   alert('Animation complete.');
 })

hide

  • # .show() 用于显示元素，用法和hide类似

.show( [duration ] [, easing ] [, complete ] )

 $('.box').show('slow');      //等同于 $('.box').css('display', 'block')
 $('.box').show(3000, function() {
    alert('Animation complete.')
 })
 $('#book').show(3000, 'linear', function() {
   alert('Animation complete.');
 })

show

# 渐变

  • # .fadeIn() 通过淡入的方式显示匹配元素

.fadeIn( [duration ] [, easing ] [, complete ] )

$('.box').fadeIn(5000)

fadeIn

  • # .fadeOut() 通过淡出的方式显示匹配元素

.fadeOut( [duration ] [, easing ] [, complete ] )

$('.box').fadeOut('slow')

fadeOut

# 滑动

  • # .slideDown()

.slideDown( [duration ] [, easing ] [, complete ] )

用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式

$('.box').slideDown('slow', function() {
    // Animation complete.
});

slideDown

  • # .slideUp()

.slideUp( [duration ] [, easing ] [, complete ] )

用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。 display 样式属性将被设置为none，以确保该元素不再影响页面布局。

$('#book').slideUp('slow', function() {
    // Animation complete.
});

slideUp

  • # .slideToggle()

.slideToggle( [duration ] [, easing ] [, complete ] )

用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。 如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline。当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。

$('#clickme').click(function() {
 $('.div').slideToggle('slow', function() {
 // Animation complete.
 });
});

slideToggle

  • # .animate()

.animate( properties [, duration ] [, easing ] [, complete ] )

根据一组 CSS 属性，执行自定义动画。 properties 类型: PlainObject 一个CSS属性和值的对象,动画将根据这组对象移动。

  <button id="btn1">start</button>
  <button id="btn2">reset/button>
 <div class="container">
    <div class="box"></div>
  </div>
.container{
  position: relative;
}
.box {
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
}
<script>
    $('#btn1').click(function(){
      $('.box').animate({
        left: '500px'
      }, 1000)
    })
 $('#btn2').click(function(){
      $('.box').animate({
        left: 0
      }, 1000)
    })
</script>

animate

  • # .stop()

停止当前正在运行的动画

$('#btn3').click(function(){
   $('.box').stop()
})

stop

← jQuery Ajax →