Jquery多动画多元素一次单击函数

好的，我有一个表，其中有3个图像，都在类中。iconeffect每个都有不同的id（#effect1,2,3），我正在尝试在单击时为它们设置动画。这是目前的代码，我有，但有一个问题与第二动画

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

现在，这段代码应该以一种方式设置#effect1的动画，另两种方式设置相反的效果（屏幕外），第一种效果设置动画，但第二种和第三种效果不设置动画。它们在上面悬停后移动到末端位置。如果在单击第一个按钮之前将鼠标悬停在它们上方，它们将正常设置动画

---

编辑：JSFIDDLE

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

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

从jQuery API文档：

队列（

默认值：true

） 类型：布尔值或字符串指示是否放置 效果队列中的动画。如果为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);
});

---

只需在CSS中为您的3个div添加position:relative：

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

---

Fiddle:

我刚刚尝试了你粘贴的第二个代码，第一个效果根本没有动画效果，第二个和第三个效果没有动画效果，但在单击第一个后会在悬停时消失。奇怪。。。你是舒尔的吗？你的动画不会干扰css吗？（如相对定位与绝对定位）好的，等等……有一个错误，我再次编辑了……“这”在函数中不会被引用……你能给我们展示一个JSFIDLE中失败的例子吗？你能为这3个分区添加一个CSS示例吗？请发布你的html和CSS，问题可能在CSS中。好了，谢谢你的修理：D