同時啓動兩個事件使用.trigger和/或.animate

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上同時觸發兩個.trigger事件（綠色正方形與「Both」同時觸發），所以不是紫色的框會下降然後對，讓它在同一時間啓動它們，然後在完成剩下的300毫秒左邊的600毫秒動畫之後，在頁面上對角地移動一下。

理想情況下，我想保留box_3。點擊只觸發box_1和box_2點擊，但讓它們同時啓動。

如果這是不可能的，是有可能的

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

黃河box_4結合起來，使他們都開始在同一時間？

所以，事件的順序是，

1. 您單擊Box_3（.trigger）或Box_4（.animate）。
2. 方格5斜向下和右移動。點擊向下移動動畫之後
3. 300 ms內完成點擊向右移動動畫之後
4. 600 ms內完成

誰能幫助我？

如果兩種方法都可以做到這一點，您能否向我展示他們兩個，以便我將它們留作未來參考。

Answer 1

如果要同時爲一個元素上的兩個屬性製作動畫，您必須在對.animate（）的單個調用中執行此操作，否則它們將排隊依次發生。在你的情況下，你需要將其沿對角線移動300ms，然後向右移動300ms。

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

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

您還可以設置隊列選項設置爲false，以達到同樣的效果：

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

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