强大的JQuery（二）--动画效果

上篇博客我们讲过了jquery的基础知识——强大的JQuery（一）--基础篇，作为web开发人员，网页的动画效果是不可缺少的，本篇博客重点来说说jquery的动画效果的实现。

因为动画的效果不能截图为大家展示，大家可以自行实验。

一、显示隐藏

1、jquery中通过hide() 和 show() 方法来隐藏和显示 HTML 元素：

<span style="font-size:18px;">$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});
</span>

2、通过toggle() 方法来切换 hide() 和 show() 方法。

<span style="font-size:18px;">$("button").click(function(){
  $("p").toggle();
});</span>

二、淡入淡出

fadeIn() 用于淡入已隐藏的元素。

<span style="font-size:18px;">$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});</span>

fadeOut() 方法用于淡出可见元素。

<span style="font-size:18px;">$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});
</span>

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

<span style="font-size:18px;">$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});
</span>

三、滑动

滑动和上显示隐藏与淡入淡出的实现方法基本相同 。

方法名	含义
slideDown	用于向下滑动元素
slideUp	用于向上滑动元素
slideToggle	如果元素向下滑动，则 slideToggle() 可向上滑动它们。 如果元素向上滑动，则 slideToggle() 可向下滑动它们。

四、自定义动画

自定义动画可以说既简单又复杂。简单说的是它只需要一个函数，复杂指的是这个函数可以添加n多个属性。

1、语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

例如：

$("button").click(function(){
  $("div").animate({left:'250px'});
});

提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

2、jQuery animate() - 操作多个属性

<span style="font-size:18px;">$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});
</span>

3、jQuery animate() - 使用队列功能

<span style="font-size:18px;">$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});
</span>

五、动画停止

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法：

$(selector).stop(stopAll,goToEnd);

解释：

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

<span style="font-size:18px;">$("#stop").click(function(){
  $("#panel").stop();
});</span>

最后:jquery为我们提供的几种动画，实现简单、功能强大，有了jquery，在javascript中非常令人头疼的动画制作变得极为容易，有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手!