jquery - jquery多动画多元素一个onclick功能

Question

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

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

现在这段代码，应该以一种方式为#effect1 设置动画，而其他两个效果则相反（屏幕外），第一个动画，但第二个和第三个效果不动画。将鼠标悬停在它们上方后，它们会移动到最终位置。如果在单击第一个之前将鼠标悬停在它们上，它们将正常动画。

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

Answer 1

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

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

来自 jQuery API 文档：

排队 ( default: true)

类型：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);
});

Answer 2

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

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

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