使用jQuery移動元素 - 淡出然後在？

Question

我有我的網站設置，以便中心導航位於我的網站的h1標題之上。然後向下滾動，並且h1移動到導航的左側，而導航向右對齊。

我使用jQuery移動元素並向元素添加類。我會如何讓h1淡出，然後像第二張照片一樣在導航旁邊？我試過了CSS過渡緩和的東西，但它似乎只是在導航後面快速移動，然後出現在前面。

有什麼建議嗎？

謝謝。

Answer 1

如果我明白你真的想你可以不喜歡這樣。

$(selector).fadeOut(500, function(){ 
    // Move the element as you wish 
    $(selector).fadeIn(); 
}); 

Answer 2

對我而言，您看起來像您在JavaScript的異步性質上遇到問題。 如果你想要一個動畫跟着另一個你不能做到這一點：

$(selector).animate(...); 
$(selector).animate(...); 

兩個動畫將在同一時間執行。相反，您需要使用jQuery提供的回調參數。

如果你看看API，你會看到你可以定義一個函數在動畫完成時運行。

$(selector).animate({properties} , duration , easing , complete); 

爲了完整起見，您傳遞一個包含下一個動畫的函數。

$(selector).animate({properties} , duration , easing , function() { 
    $(selector).animate({properties}); 
}); 

More info on the animate() API

Answer 3

看到這裏的淡出，移動，淡入爲例

http://jsfiddle.net/atk49os1/

<div id=box1> 
    aaa 
    <span>zzz</span> 
</div> 
<div id=box2> 
    bbb 
</div> 
$(document).ready(function(){ 
    $('span').fadeOut('slow',function(){ 
     $('#box2').append($(this).fadeIn('slow')); 
    }) 
}); 

編輯：

我添加了一個按鈕，thigger 「移動」

http://jsfiddle.net/zxfneqqt/