Question

我有以下内容...... jsFiddle

CSS

#box_1 {
    position:absolute;
    height:50px;
    width:50px;
    background-color:red;
    top:10px;
    left:10px; 
    text-align:center;
    color:#FFFFFF;
}

#box_2 {
    position:absolute;
    height:50px;
    width:50px;
    background-color:blue;
    top:10px;
    left:70px; 
    text-align:center;
    color:#FFFFFF;
}

#box_3 {
    position:absolute;
    height:50px;
    width:50px;
    background-color:green;
    top:10px;
    left:130px; 
    text-align:center;
    color:#FFFFFF;
}

#box_4 {
    position:absolute;
    height:50px;
    width:50px;
    background-color:yellow;
    top:10px;
    left:190px; 
   text-align:center;
}    

#box_5 {
    position:absolute;
    height:110px;
    width:110px;
    background-color:purple;
    top:100px;
    left:70px; 
}    

#box_6 {
    position:absolute;
    height:25px;
    width:50px;
    background-color:black;
    top:20px;
    left:300px; 
    text-align:center;
    color:#FFFFFF;
}

JQuery的

$('#box_1').click(function() {  
    $('#box_5').animate({
            top: '170px'
        }, 300);
});

$('#box_2').click(function() {  
    $('#box_5').animate({
            left: '170px'
        }, 600);
});

$('#box_3').click(function() {  
    $('#box_1').trigger('click');
    $('#box_2').trigger('click');
});

$('#box_4').click(function() {  
    $('#box_5').animate({
            top: '170px'
        }, 300);
    $('#box_5').animate({
            left: '170px'
        }, 600);
});

$('#box_6').click(function() {  
    $('#box_5').animate({
            top: '100px'
    }, 200);
    $('#box_5').animate({
            left: '70px'
    }, 200);
});

HTML

<div id="box_1">
    Down
</div>
<div id="box_2">
    Right
</div>
<div id="box_3">
    Both
</div>
<div id="box_4">
    Both
</div>
<div id="box_5"></div>
<div id="box_6">
    Reset
</div>

我想知道是否有可能同时在box_3（绿色方块中带有“Both”）同时触发两个.trigger事件，因此不是紫色框下降然后向右，它会同时启动它们并在完成剩余300毫秒左右600ms动画之后对角移动一点点。

理想情况下，我想保留box_3 .click以触发box_1和box_2点击，但同时启动它们。

如果无法做到这一点，是否可以合并

$('#box_5').animate({
        top: '170px'
}, 300);
$('#box_5').animate({
        left: '170px'
}, 600);

黄色box_4上的

所以它们都是同时开始的吗？

所以，事件的顺序是，

您点击Box_3（.trigger）或Box_4（.animate）。
方框5沿对角线向右和向右移动。
300毫秒完成
600 ms完成

任何人都可以帮助我吗？

如果可以两种方式做到这一点，你能否告诉我们两者，这样我就可以保留它们以供将来参考。

Answer 1

如果要同时为一个元素上的两个属性设置动画，则必须在对.animate（）的单个调用中执行此操作，否则它们将排队等待一个接一个地发生。在您的情况下，您需要对角移动300毫秒，然后向右移动300毫秒。

.animate({
    top: "170px",
    left: 170/2 + "px"
},300).animate({
    left: "170px"
},300)

http://jsfiddle.net/cAsyB/1/

您还可以将queue选项设置为false以获得相同的效果：

$('#box_5').animate({
    top: '100px'
}, {
    duration: 200, 
    queue: false
});
$('#box_5').animate({
    left: '70px'
}, {
    duration: 400, 
    queue: false
});

http://jsfiddle.net/cAsyB/2/

使用.trigger和/或.animate同时启动两个事件

1 个答案: