2011-12-23 85 views
1

下面的代碼段上smoothe動畫執行:jQuery的動畫:分割一個動畫兩個部分

$('button').animate({ 
     'margin-top': 123, 
     'opacity': 1 
    }, 500); 

是在某種程度上可以將其在兩個命令拆分而不必排隊兩個動畫的效果?

jQelems.$divSlideButtonLeft.animate({ 
     'margin-top': 123, 
    }, 500); 

    jQelems.$divSlideButtonLeft.animate({ 
     'opacity': 1 
    }, 500); 

目標是能夠爲不同功能中的一個對象分配動畫。

回答

1

如果我正確理解你的問題,你可以使用的animate()the second form,並在queue選項傳遞false

jQelems.$divSlideButtonLeft.animate({ 
    "margin-top": 123 
}, { 
    duration: 500, 
    queue: false 
}); 

jQelems.$divSlideButtonLeft.animate({ 
    opacity: 1 
}, { 
    duration: 500, 
    queue: false 
}); 

文檔說:

queue:布爾值,指示是否將 影響隊列中的動畫。如果false,動畫將立即開始。

+0

你是我的朋友。我其實之前嘗試過這個參數,但它不起作用,也許我的語法錯了 – iappwebdev 2011-12-23 13:44:35

0

你可以試試 調用你的第一部分動畫的回調函數中的不透明度。

$('button').animate({'margin-top': 123,}, 500, function(){ 
$('button').animate({ 'opacity': 1}, 500) 
}); 

兩個動畫都會一個接一個地發生。

+0

我想完全分開兩個動畫調用,它們不能相互依賴。哈米迪給出了正確的答案。 – iappwebdev 2011-12-23 13:44:29