Question

jquery动画如何操作两个属性，并且时间不同

jquery动画如何操作两个属性，并且时间不同??我这样写错误的。。。变成队列动画了。。。。。。

Answer 1

多个属性同时执行，时间相同：

$(this).find(".left").stop().animate({
    "left": "200px",
    "opacity": "0"
}, 300)

多个操作同时执行，时间不同：

$(this).find(".left").stop().animate({"left": "200px"}, 300).animate({"opacity": "0"}, 100)

Answer 2

题主的思路是对的，可以将这两个动作分到两个animate中逐步执行。问题出在stop()函数。

先看一下stop()函数的定义和语法

定义：

stop() 方法停止当前正在运行的动画。

语法：

$(selector).stop(stopAll,goToEnd)

stopAll    可选。规定是否停止被选元素的所有加入队列的动画。    

goToEnd    可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。

stopAll默认是true。

下面我们来看题主的语句。首先代码中定义了   animate({'left':'200px'},300)，300表示从动画开始到结束，共花费300毫秒，但是紧接着浏览器执行了$(this).find('.left').stop().animate({'opcity':'0',100})，注意这里的stop，当浏览器执行stop时上一步300毫秒的动画实际上才刚刚开始，还没有执行完就被stop了。所以会感觉第一条语句没有执行。

解决的办法有两种：

1、取消第二条中的stop命令,效果是两个动画同时执行

$(this).find('.left').stop().animate({'left':'200px'},300);
$(this).find('.left').animate({'opcity':'0',100});

2、设置延时，等第一步执行完毕后在执行第二步，效果是第一个动画完成后执行第二个动画

$(this).find('.left').stop().animate({'left':'200px'},300);
var _this = this;
setTimeout(function(){
    $(_this).find('.left').animate({'opcity':'0',100});
},300);

Answer 3

jquery的动画，如果你是要执行完第一个以后，在执行第二个的话，可以采用jquery的链式写法
$(this).find('.left').stop().animate({'left':'200px'},300).animate({'opacity':'0'},100)
如果要分开写的话，不要用stop(),会把上一个动画暂停
$(this).find('.left').animate({height:"300px"},3000);
$(this).find('.left').animate({width:"200px"},2000);

Answer 4

$(this).find('.left').shtop().animate({'left':'200px'},300,function(){
    $(this).find('.left').shtop().animate({'opacity':0},100);
});

看看是不是你想要的

追问

你这个是回调函数了，，不是我想要的，我想要两个同时变

追答

两个同时变就把stop()都去掉

Answer 5

用settimeout试试呢