jQuery之动画

一、常用动画

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

用于隐藏元素，没有参数的时候等同于直接设置 display 属性为 none

$('.box').hide()

等同于

$('.box').css('display','none')

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

用于显示元素，用法和 hide 类似

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

通过淡入的方式显示匹配元素，参数含义和上面相同

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

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

通过淡出的方式隐藏匹配元素

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

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

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

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

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

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

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

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

用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。

如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline。当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。

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

demo 地址参考 http://js.jirengu.com/sogiy/embed?html,console,output

二、自定义动画

简单的动画不能满足需求时，jquery提供了自定义动画行为的方法

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

可参考官网API https://api.jquery.com/animate/

注：properties是一个CSS属性和值的对象,动画将根据这组对象移动

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

demo 地址参考 http://js.jirengu.com/viqiv/1/edit?html,css,output