Jquery多个动画多个元素一个onclick函数

时间:2013-09-13 11:34:25

标签: jquery animation elements

好吧所以我在课堂上有一张包含3张图片的表格。每个人都有一个不同的ID(#effect1,2,3),我试图在onclick上设置动画。这是我目前的代码,但第二个动画存在问题。

$('#effect1').click(function() {
    $(this).finish();
    $(this).animate({ right: 200 });
    $('#effect2, #effect3').animate({ left: 1000 });
});

现在这段代码,应该以一种方式为#effect1制作动画,而另外两种以相反的方式制作动画(在屏幕外),第一种是动画效果,但第二种和第三种效果不会生成动画。它们在盘旋之后移动到最终位置。如果您在点击第一个之前将鼠标悬停在它们上面,它们将正常动画。

编辑:JSFIDDLE http://jsfiddle.net/9EqNy/24/

2 个答案:

答案 0 :(得分:0)

您需要为同时运行的动画禁用队列:

$('#effect1').click(function() {
    $(this).finish();
    $(this).animate({ right: 200, queue : false });
    $('#effect2, #effect3').animate({ left: 1000, queue : false });
});

来自jQuery API文档:

  

queue(default: true

     

Type:Boolean或String一个布尔值,指示是否放置   效果队列中的动画。如果为false,则动画将开始   立即

[编辑] 试试这个:

$('#effect1').click(function() {
    $(this).finish();
    var self = this;
    setTimeout(function(){
        $(self).animate({ right: 200, queue : false })
    },1);
    setTimeout(function(){
        $('#effect2, #effect3').animate({ left: 1000, queue : false });
    },1);
});

答案 1 :(得分:0)

Juste添加位置:3个DIV的CSS中的相对位置:

#effect1 {
    width:100px;
    height:100px;
    background-color:red;
    position:relative;
}

小提琴:http://jsfiddle.net/wchXQ/