jQuery动画与特效详解

风飞飘扬 2017-11-19

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()中的-=和+=分别实现相对左移和相对右移。

相关推荐

Web全栈笔记 / 0评论 2020-06-15