0

topアニメーション用のleftプロパティを持つクラスを追加しようとしていますが、アニメーションdivせずに追加されたクラス属性に移動するだけです。

#myClass.move {
    top:100px;
    left:100px; 
}

目標は、クラスが追加されたときにアニメーションが発生し、追加されたクラスのプロパティに基づいてアニメーション化することです。

var shiftTop = parseInt($(".move").css("top")); 
var shiftLeft = parseInt($(".move").css("left")); 

$("#myClass").addClass("move").animate({top: "-="+shiftTop, left: "-="+shiftLeft}, 1000, function() {});

これは可能ですか？

4

4 に答える 4

3

jQueryUIを使用します。

デモはこちら

$("#myClass").click(function() {
    $(this).addClass("move", 1000);
});​
于 2012-07-27T22:26:01.650 に答える
2 
$('#myClass').animate({top: "-="+shiftTop, left: "-="+shiftLeft}, 1000, function() {
    $(this).addClass('#myClass');
});
于 2012-07-27T22:22:13.220 に答える
1

はい、可能です：

animate の前にクラスを追加:
$("#myClass").addClass("move").animate({top: "-="+shiftTop, left: "-="+shiftLeft}, 1000);
demo

animate の後にクラスを追加します。

$("#myClass").animate({top: "-="+shiftTop, left: "-="+shiftLeft}, 1000, function() {
    $(this).addClass('move');
});


デモ

于 2012-07-27T22:26:04.307 に答える
0

私は.move、あなたのドキュメントにすでにクラスを持つ要素があり、そこから値と値を読み取るshiftTopと仮定していshiftLeftます。

topおよびleft属性を変更するだけでよい場合は、関数がそれらをインラインで追加するため、addClassステップを完全に削除できます。animate後でクラスを適用する必要がある場合は、animateコールバックで行います。

互換性の要件によっては、 transitionsを使用して、これを完全に CSS で行うこともできます。

于 2012-07-27T22:27:18.287 に答える