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",  "300" }, 200);
            }, function () {
                $(this).stop(true, false).animate({ height: "22",  "60" }, 300);
            });
        });

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

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

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

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