動畫和同時添加類

我試圖添加一個具有動畫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() {});

這可能嗎？

來源

2012-07-27 UserX

使用jQueryUI。

Demo here

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

來源

2012-07-27 22:26:01 kei

這工作得很好。非常感謝 – UserX 2012-07-27 23:06:50

我知道這是一個有點偏離主題，但有人知道爲什麼動畫在safari中如此波濤洶涌？我正在運行版本5.1.7。 – UserX 2012-07-28 01:08:34

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

來源

2012-07-27 22:22:13 Chad

是的，它是可能的：

添加前級動畫：
$("#myClass").addClass("move").animate({top: "-="+shiftTop, left: "-="+shiftLeft}, 1000);
demo

添加下課動畫：

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

demo

來源

2012-07-27 22:26:04

+1，這應該是答案，沒有任何額外的庫。這正是我所尋找的，謝謝！ – Yisela 2012-08-02 23:20:15

@yisela不客氣:) – 2012-08-02 23:23:45

我假設你的文檔中，將會從中讀取shiftTop和shiftLeft值與.move類的元素。

如果你需要做的是改變top和left屬性，你可以完全移除addClass步驟中，由於animate功能內嵌添加它們。如果您確實需要之後申請的課程，請在animate回撥中執行。

根據您的兼容性要求，您也可以完全使用CSS完成此操作，使用transitions。

來源

2012-07-27 22:27:18 freejosh

動畫和同時添加類

回答

相關問題