码迷,mamicode.com
首页 > Web开发 > 详细

jQuery(5)——动画

时间:2016-09-26 14:33:16      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:

jQuery中的动画

【show()方法和hide()方法】

在HTML文档中,为一个元素调用hide()方法,会将该元素的display样式改为“none”,show()方法将元素的display样式改为先前的显示状态。

$(function(){
    $("#pane1 h5.head").toggle(function(){
        $(this).next().hide();
    }.function(){
        $(this).next().show();
    });
});

用jQuery做动画效果要求要在标准模式下,否则可能会引起动画抖动。

让元素动起来

如果希望在调用show()方法时,元素慢慢的显示出来,可以为show()方法指定一个速度参数。如,指定一个速度关键字“slow”

$("element").show("slow");

运行该代码后,元素将在600毫秒内慢慢地显示出来,还有其他关键字“normal”和“fast”。还可以为显示速度指定一个数字,单位是毫秒。

【fadeIn()方法和fadeOut()方法】

此方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度,知道元素完全消失,fadeIn()则相反。

$(function(){
    $("#pane1 h5.head").toggle(function(){
        $(this).next().fadeOut();
    }.function(){
        $(this).next().fadeIn();
    });
});

【slideUp()方法和slideDown()方法】

此方法只会改变元素的高度。如果一个元素的display属性值为“none”,当调用slideDown()方法时,这个元素将由上至下延伸显示。slideUp()方法正好相反。

【自定义动画方法animate()】

语法结构:animate(params,speed,callback);

参数说明:params:一个包含样式属性及值的映射,比如{property:"value1",property2:"value2",.....}。

    speed:速度参数,可选。

    callback:在动画完成时执行的函数,可选。

自定义简单动画:

$(function(){
    $("pane1").click(function(){
        $(this).animate({left:"500px"},3000);
     });
});

作用:使元素在3秒内,向右移动500像素。且css代码中设置的是“position:relative”。

累加、累减动画:在500px之前加上“+=”或者“-=”符号即可表示在当前位置累加或者累减。{left:"+=500px",3000};

多重动画

(1)同时执行多个动画:

$(function(){
    $("myImg").click(function(){
       $(this) .animate({left:"500px",height:"200px"},3000);  //<div>元素在向右滑动同时,也会放大高度
    });
});

(2)按顺序执行多个动画:只需要把代码拆开,然后按照顺序写。

$(this).animate({left:"500px"},3000);
$(this).animate({height:"500px"},3000);
//也可以改为链式写法
$(this).animate({left:"500px"},3000);
        .animate({height:"500px"},3000);

综合动画

【动画回调函数】

可以使用回调函数(callback)对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可:

$("pane1").click(function(){
    $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
              .animate({top:"200px",width:"200px"},3000)
               $(this).css("border","5px solid blue");
            })
});

callback回调函数适用于jQuery所有的动画效果方法。

【停止动画和判断是否处于动画状态】

停止元素的动画:stop()方法。语法结构:stop([clearQueue],[gotoEnd]);参数clearQueue和gotoEnd都是可选参数,为Boolean值。clearQueue代表是否要清空未执行完的动画队列,gotoEnd代表是否直接将正在进行的动画跳转到末状态。

判断元素是否处于动画状态:

if(!$(element).is(":animated")){   //判断元素是否正处于动画状态
      //如果当前没有进行动画,则添加新动画
}

延迟动画:delay()方法。可以将队列中的函数延迟执行。它既可以推迟动画队列中函数的执行,也可以用于自定义队列。

【其他动画方法】

toggle()方法:切换元素的可见状态。

slideToggle()方法:通过高度变化来切换匹配元素的可见性。

fadeTo()方法:可以把元素的不透明以渐进方式调整到指定的值。

fadeToggle()方法:通过不透明度来切换匹配元素的可见性。

【动画方法概括】

特别注意animate()方法,可以使用它来替代其他所有的动画方法。详情在《锋利的jQuery》P132页。

jQuery(5)——动画

标签:

原文地址:http://www.cnblogs.com/wlfsmile/p/5909027.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!