jQuery中的动画

最新推荐文章于 2025-09-13 09:06:35 发布

转载最新推荐文章于 2025-09-13 09:06:35 发布 · 89 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hehy/p/3696945.html

文章标签：

#javascript #ViewUI

show()和hide()在不带参数时，相当于css({"dispaly":"none/block/inline"}),立即隐藏或显示匹配的元素，不会有任何动画。

带参数：show("slow"),元素将在600毫秒内慢慢显示（"normal"和"fast"分别是400和200毫秒），当然也可以指定时间如 slow(1000)。

fadeIn() 和fadeOut()：改变元素的不透明度。fadeOut()在指定时间内降低元素的不透明度，直到完全消失。fadeIn正好相反

slideUp()和slideDown()：改变元素的高度。slideDown()，元素将由上至下延伸显示，slideUp()正好相反。

animate(params,speed,callback);可以自定义动画。

1、params：一个包含样式属性及值的映射，例如：{property1:"value1",property2:"value2",…}

2、speed:速度参数，可选。

3、callback：在动画完成后执行的函数，可选。

例如：

<div style="background-color: #5371BE; width: 100px; height: 100px;position: relative;"
id="div1"></div>
<button class="btn btn-xs" id="show">show</button>

$(function() {
            $("#show").on("click", function() {
                $("#div1").animate({left:"500px"},3000);
            });
        });

点击show按钮之后，div在3秒内，向右移动500像素。如果在500px之前加上“+=”或者“-=”符号表示在当前位置累加或者类减例如：$("#div1").animate({left:"-=500px"},3000);

多重动画：

    $("#show").on("click", function() {
             $("#div1").animate({left:"+=500px",height:"200px"},3000);//在向右滑动的同时，也会放大高度
            });

按顺序执行多个动画：先向右移动500px,然后在增高200px。上面的js改成如下

$("#div1").animate({left:"+=500px"},3000)
                .animate({height:"200px"},3000);
也可以分开来写：

$("#div1").animate({left:"+=500px"},3000);
$("#div1").animate({height:"200px"},3000);

综合动画

$("#div1").animate({left:"400px",height:"200px",opacity:"1"},3000)
          .animate({top:"200px",width:"200px"},3000,function(){
                    $(this).css("background-color","#a45");//这段代码不是动画效果所以不能直接.css({}),他不会加入动画队列，所以得写在回调函数内
            }).fadeOut("slow");

回调函数适用于jQuery所有动画效果方法，例如fadeOut();fadeOut("slow",function(){……})

停止元素的动画

stop([clearQueue],[gotoEnd]),两个参数都是可选的，为Boolean值。clearQueue代表是否清空未执行的动画队列，gotoEnd代表是否直接将正在执行的动画跳到末状态。

如果直接使用stop()，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。

转载于:https://www.cnblogs.com/hehy/p/3696945.html