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。

Demo here

$("#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);
demo

动画后添加课程：

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

demo

Answer 4

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

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

根据您的兼容性要求，您也可以使用transitions完全使用CSS。

同时动画和添加类

4 个答案: