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イベントを同時に発生させることができるかどうか疑問に思っているので、紫色のボックスを下に移動してから右に移動する代わりに、それらを開始させます両方を同時に実行し、ページを斜めに横切って少し移動してから、左側の600ミリ秒のアニメーションの残りの300ミリ秒を完了します。

理想的には、box_3 .clickを保持して、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ミリ秒が完了します
  4. 右に移動するアニメーションをクリックしてから600ミリ秒が完了します

誰か助けてもらえますか？

これを両方の方法で行うことが可能である場合、将来の参照のためにそれらを保持できるように、両方を見せていただけませんか。

4

1 に答える 1

1

1つの要素で2つのプロパティを同時にアニメーション化する場合は、.animate（）の1回の呼び出し内でアニメーション化する必要があります。そうしないと、次々に発生するようにキューに入れられます。あなたの場合、それを斜めに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/

于 2013-03-25T17:22:18.320 に答える