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的时候,可以直接到达结束时候的状态
关于JQuery animate()方法
原文地址：http://www.cnblogs.com/yigexiaojiangshi/p/7464565.html