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

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

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

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

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

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

事件处理套件也有一个名为.toggle()方法。哪一个被调用取决于传递的参数的设置

用来切换元素的隐藏、显示，类似于toggleClass，用法和show、hide类似

渐变

---

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

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

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

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

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

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

.fadeTo( duration, opacity [, easing ] [, complete ] )

调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果

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

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

通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。

$("button:first").click(function() {
  $("p:first").fadeToggle("slow", "linear");
});

滑动

---

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

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

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

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

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

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

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

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

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

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

动画队列

当在jQuery对象上调用动画方法时，如果对象正在执行某个动画效果，那么新调用的动画方法就会被添加到动画队列中，jQuery会按顺序依次执行动画队列的每个动画。

jQuery提供了以下几种方法来操作动画队列。

.queue([queueName],callback(next)/newQueue)

queue()方法用来显示在匹配的元素上的已经执行的函数队列。
可以接受一个可选参数——一个含有队列名的字符串。该参数默认是'fx'
可以接受一个回调函数作为参数，表示将要添加到队列中的新函数，队列执行完函数后，队列后面的动画效果被停止

$('#btn').click(function(event){
    setInterval(function(){
        $('#result').html('队列数是:' +$('#box').queue().length)
    },100)
  $('#box').animate({'left':'100px'},1000).animate({'width':'200px'},1000);
  $('#box').queue(function(){
      $('#box').css('background','lightgreen');
  })
  $('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);
});
//动画停在了绿色背景，队列长度为3

可以接受一个数组为参数，替换当前列队内容的函数数组
queue()方法的回调函数中，可以进行样式变换等，但不可以增加动画效果

.dequeue([queueName])

dequeue()方法用来执行匹配元素队列的下一个函数
可以接受一个可选参数——一个含有队列名的字符串，默认是fx

$('#btn').click(function(event){
    setInterval(function(){
        $('#result').html('队列数是:' +$('#box').queue().length)
    },100)
  $('#box').animate({'left':'100px'},1000).animate({'width':'200px'},1000);
  $('#box').queue(function(){
      $(this).css('background','lightgreen');
      $(this).dequeue();
  })
  $('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);
});
//动画一直进行到结尾

.clearQueue([queueName])

clearQueue()方法用来从列队中移除所有未执行的项
可以接受一个可选参数——一个含有队列名的字符串，默认是fx

$('#btn').click(function(event){
    setInterval(function(){
        $('#result').html('队列数是:' +$('#box').queue().length)
    },100)
  $('#box').animate({'left':'100px'},1000).animate({'width':'200px'},1000);
  $('#box').queue(function(){
      $(this).css('background','lightgreen');
      $(this).dequeue();
  })
  $('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);

});
$('#btn1').click(function(event){
    $('#box').clearQueue();
})
//一旦执行clearQueue()队列清空，动画停止

.finish( [queue ] )

停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画

.stop( [clearQueue ] [, jumpToEnd ] )

参数clearQueue：布尔值，指示是否取消队列动画，默认false
参数jumpToEnd：布尔值，指示是否当前动画立即完成，默认false

<div id="hoverme" style="border: 1px solid pink">
    Hover me
    <img  src="./image/Reinhardt_icon.png" alt="" width="100" height="123" style="display: none;" />
  </div>

 $('#hoverme').hover(function() {
  $(this).find('img').stop(true, true).fadeIn();
}, function() {
  $(this).find('img').stop(true, true).fadeOut();
});