jQuery笔记（动画）

最新推荐文章于 2024-11-08 16:09:18 发布

banmao8461

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量90

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/AB786883603/p/8325402.html

版权

使用JavaScript实现动画效果通常都是调用setTimeout()一点点地改变CSS样式，从而达到有动画效果。
要实现动画效果，单纯使用原始JavaScript会很繁琐，而使用jQuery就会相对简单一些。

1 `show()`，`hide()`与`toggle()`

show()，hide()与toggle()顾名思义，就是显示，隐藏以及切换的意思，它们都是jQuery对象的方法，可以接受两个参数，一个是时间，一个是callback函数（回调函数），这用于动画完成后才执行的动作。
时间参数可分为：slow，normal，fast(字符串)以及毫秒（Number）。

var $div = $("div.abc");
$div.toggle(1000);

2 `slideUp()`，`slideDown()`与`slideToggle()`

show()和hide()是从左上角逐渐展开或收缩的，而slideUp()和slideDown()则是在垂直方向逐渐展开或收缩的。

3 `fadeIn()`，`fadeOut()`与`fadeToggle()`

fadeIn()和fadeOut()的动画效果是淡入淡出，也就是通过不断设置DOM元素的opacity属性来实现。

4 自定义动画

4.1 `animate()`

animate()需要传入的参数就是DOM元素最终的CSS状态（类型是个对象），时间以及回调函数，jQuery在时间段内不断调整CSS直到达到我们设定的值，同时假如需要连续调用animate()方法，那么设置CSS参数时可使用叠加，递减运算符，如：

var $div=$("div.abc");
$div.animate({
    width:"250px",
    heigth:"+=250px",//叠加
    opacity:0.25
},3000,function(){
    //恢复状态
    $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
})

注：animate()方法中所用到的CSS属性值必须是数字，倘若想要实现如margin:auto;的效果，就需要先使用jQuery进行操作取出当margin:auto;时对应的数值

4.2 `is(':animated')`

为了避免用户快速，重复地执行animate()方法（:animated是个选择器），可以使用is(':animated')来规定当对象没有动画状态时，才执行animat()方法，以免重复叠加，如：

if (!$("#abc").is(":animated")){
    xxxx
}

类似的还有is(':visible')（可见的）

4.3 `delay()`

jQuery的动画效果还可以串行执行，通过delay()方法还可以实现暂停，如：

var div=$("img");
div.slideDown(2000).delay(1000).animate({
       width: '100px',
       height: '100px'
        }, 2000).delay(1000).animate({
       width: '50px',
       height: '50px'
   }, 2000);