javascript - 同时动画和添加类

Question

我正在尝试为动画添加一个具有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() {});

这可能吗？

Answer 1

使用jQueryUI。

演示在这里

$("#myClass").click(function() {
    $(this).addClass("move", 1000);
});​

Answer 2

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

Answer 3

是的，有可能：

在动画之前添加类：
$("#myClass").addClass("move").animate({top: "-="+shiftTop, left: "-="+shiftLeft}, 1000);
演示

在动画之后添加类：

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

演示

Answer 4

我假设.move您的文档中已经有一个带有类的元素，可以从中读取shiftTop和shiftLeft值。

如果您需要做的只是更改top和left属性，则可以完全删除该addClass步骤，因为该animate函数将它们内联。如果您确实需要之后应用的类，请在animate回调中进行。

根据您的兼容性要求，您也可以使用过渡完全使用 CSS 来完成此操作。