jQuery 动画

show()和hide()方法

hide() $(“element”).hide(); //隐藏元素      element.css(“display”,none); //与前面代码效果相同

show() $(“element”).show(); //显示元素 element.css(“display”,inline); //显示元素，或者使用block

能够为show()方法指定一个速度参数，例如，指定一个速度关键字“slow”   代码以下：

$(“element”).show(“slow”); 其余的速度关键字还有normal（400毫秒），fast（200毫秒），或者直接使用毫秒数字。

fadeIn()方法和fadeOut()方法 

 

 只改变元素不透明度

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

slideUp()方法和slideDown()方法

 只会改变元素的高度

  $(function () {
            //hide   从右下角到左上角的收缩，宽和高都减小  show相反
            //fadeIn  
            //slideDown    只减小宽
            $(".head").bind("mouseover", function () {
                $(this).next().slideDown(1200);
            }).bind("mouseout", function () {
                $(this).next().slideUp(1200);
            });
           
        });

本身定义动画animate()

animate（params，speed，callback）；

1.params：一个包含样式属性及值的映射，好比{property1:”value1”,property2:”value2”}

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

3.callback：在动画完成时执行的函数，可选

简单动画

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

多重动画   上一个案例只控制了div块从左网右移动，而多重动画能够在一个动画中有多个变化效果。

$(function(){ $("#panel").click(function(){ $(this).animate({left: "500px",height:"200px"}, 3000);     });      });

分步执行：

$(function(){ $("#panel").click(function(){  $(this).animate({left: "500px"}, 3000) .animate({height: "200px"}, 3000);  })  })

<script>
        $(function () {
                $("div").animate({ "left": "500px", "top": "500px", "width": "150px", "height": "150px" }, 3000).animate({
                    "left": "0", "top": "0", "width": "100px", "height": "100px"}, 3000);
        });
    </script>

回调函数：

  $(function () {
            $("#small").animate({ "left": "920px" }, 3000).animate({ "top": "450px" }, 4000, function () {
                $("#small").css("background-color", "red");  //动画执行完或执行此函数
　　　　    });
        });

中止动画

不少时候须要中止匹配元素正在进行的动画，例如上例的动画，若是须要在某处中止动画，须要使用stop()方法。

stop([clearQuery][,gotoEnd]);

参数clearQuery和gotoEnd都是可选的参数，为Boolean值（true，false）。

clearQueue表明是否要清空未执行完的动画队列。  True:不执行后面的动画列队  False：执行后面的动画列队

gotoEnd表明是否直接将正在执行的动画跳转到结束位置。    True: 直接调到结束位置    False:不作了这个动画，不动了

 

在制做动画效果的时候，当触发的动画过多时，常常会出现前面的动画还未执行完后面的动画又被触发，致使动画效果存储到队列中，直到运行一个个运行结束。

快速划过问题： 执行动画以前 stop() ==stop(false,false)

 

  $(function () {
            //stop默认  stop(false,false)
            $("#panel").hover(function () {
                $(this).stop(true,false).animate({ height: "150", width: "300" }, 200);
            }, function () {
                $(this).stop(true, false).animate({ height: "22", width: "60" }, 300);
            });
        });

 

 

 

 

stop()方法只能中止一个动画，它并不能中止连续动画，这是咱们就必须结束stop()方法的第一个参数，清除动画队列，从新开始新的动画。

 连续动画问题：  执行动画以前 stop() ==stop(true,false)

 

 $(function () {
            $("#panel").hover(function () {
                $(this).stop(true,false)
                    .animate({ height: "150" }, 200)
                    .animate({ width: "300" }, 300)
            }, function () {
                $(this).stop(true,false)
                    .animate({ height: "22" }, 200)
                    .animate({ width: "60" }, 300)
            });
        });

 

注：记住一个，关于上面两个问题   在执行动画以前   给stop(true,false)便可