jQuery动画与特效详解

jQuery的自动显隐，渐入渐出、飞入飞出、自定义动画

 

拓展：opacity 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。

 

1.显示和隐藏hide()和show()
这两个方法可以接受参数控制显隐藏过程
语法如下
show(duration,[callback]);
hide(duration,[callback]);
其中，duration表示动画执行时间的长短，可以表示速度的字符串，包括slow,normal,fast.也可以是表示时间的整数(毫秒)。callback是可选的回调函数。在动画完成之后执行。
$("input:last").click(function() {
      $("p").show(500); //显示
});

2.使用fadeIn()和fadeOut()方式

动画效果类似褪色，语法与slow()和hide()完全相同

语法：

fadeIn(duration, [callback]);
fadeOut(duration, [callback]);

$("input:eq(1)").click(function() {
        $("img").fadeIn(1000); //逐渐fadeIn
});

 

3.fadeTo()方法的使用，将被选元素的不透明度逐渐地改变为指定的值

语法：$("input:eq(2)").click(function() {

      $("img").fadeTo(1000, 0.5);

 

});

 

4.slideUp()和slideDown()来模拟PPT中的类似幻灯片拉帘效果， 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。

 

之前看到网上有人说这个滑动效果是通过控制display样式来实现，一开始我也有此疑问，所以在代码中我添加了一段输出div高度的脚本，以此来验证滑动效果的确是否通过高度来控制的，结果证明通的确如此。

 

①jQuery slideDown() 方法用于向下滑动元素。

    $(selector).slideDown(speed,callback);

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

 

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

②jQuery slideUp() 方法用于向上滑动元素。

③jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

    如果元素向下滑动，则 slideToggle() 可向上滑动它们。

    如果元素向上滑动，则 slideToggle() 可向下滑动它们。

 

 

 

5.jQuery不能涵盖所有的动画效果，但它提供了animate()方法，能够自定义动画

一共有两种形式。第一种形式比较常用。用法如下

①animate(params,[duration],[easing],[callback])

注意：params（参数）中的变量遵循camel命名方式。例如paddingLeft不能写成padding-left.另外，params只能是css中用数值表示的属性。例如width.top.opacity等。

所以像backgroundColor这样的属性不被animate支持，这里我遇到的一个问题就是溢出隐藏overflow-y,这里有"-"，所以不能加"-"。且属性的值不是数字，所以不能用这些属性。

 

在params中，jQuery还可以用“+=”或者"-="来表示相对变化。如先将div进行绝对定位，然后使用animate()中的-=和+=分别实现相对左移和相对右移。