0

我有以下... 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”的绿色方块），所以不要让紫色框先向下然后再向右，让它启动它们两者同时在页面上对角移动一点，然后在完成左侧 600ms 动画之后的剩余 300ms 之前。

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

如果这不可能，是否可以结合

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

在 Yellow box_4 上，所以它们同时开始？

所以，事件的顺序是，

  1. 单击 Box_3 (.trigger) 或 Box_4 (.animate)。
  2. 方框 5 沿对角线向下和向右移动。
  3. 单击下移动画完成后 300 毫秒
  4. 单击右移动画完成后 600 毫秒

谁能帮我？

如果可以两种方式都这样做，您能否将它们都显示给我，以便我保留它们以供将来参考。

4

1 回答 1

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/

于 2013-03-25T17:22:18.320 回答