关于JQuery animate()方法

html:

        <button>点击我</button><p>如果你想在一个涉及动画的函数之后来执行语句，请使用callback函数</p><div class="panel"></div><div class="content"></div>    

css部分：

注意：使用animate函数时，为了能够影响元素的 top bottom left right 属性值，需先将position属性值设置为 relative 或者 absolute　

            .panel {width: 100px;height: 100px;border: 1px solid #0050d0;background: red;cursor: pointer;position: relative;}.content {width: 100px;height: 100px;margin-top: 20px;background: green;}        

 如果在500之前加上 += 或 -= 代表在当前位置递增或者递减　

        $(".panel").click(function() {$(this).animate({left: "+=500"},3000);//递增         })  

同时执行多个动画

$(this).animate({left: "500", top: "200"},3000);

按顺序执行动画 -- 动画队列

 $(this).animate({left: "500"},3000); $(this).animate({top: "200"},3000);

以上可改为 链式写法

$(this).animate({left: "500px"},3000).animate({top: "200px"}, 3000);

 综合动画
 透明度可以用小数，用百分数无效

$(this).animate({left: "500px", height: "200px", opacity: "0.5"},3000).animate({top: "200px", width: "200px"},3000).fadeOut("slow");

 给hover 事件添加 stop() 方法 可解决移入移出动作过快 导致光标动作与动画效果不一致的问题
注意： 移入移出都需要添加stop()

$(".panel").hover(function() { $(this).stop().animate({height: "150",width: "300"},3000) },function(){ $(this).stop().animate({height: "22",width: "60"},3000) })

当遇到的是组合动画的时候

                    $(".panel").hover(function() {$(this).stop().animate({height: "150"},3000)//如果此时光标移出.animate({width: "300"},3000)//执行这个动画 而不是下面移出的动画},function(){$(this).stop().animate({height: "22"},3000).animate({width: "60"},3000)})            

把stop()第一个参数设置为true ，可以解决上面的问题，跳过width为300的样式改变 执行鼠标移出事件

                    $(".panel").hover(function() {$(this).stop(true).animate({height: "150"},3000)//如果此时光标移出.animate({width: "300"},3000)//执行下面移出的动画},function(){$(this).stop(true).animate({height: "22"},3000).animate({width: "60"},3000)})

如果stop()第二个参数也设置为true的时候,可以直接到达结束时候的状态