如何在jQuery中使用.before動畫元素

Question

我想在.content元素之前添加.item元素，但它只是簡單地將.item從之前的位置移除，並追加到.content之前。

我想要的是使用一些動畫，從原始位置緩慢移除.item元素，並在其新位置緩慢出現。我該怎麼做？

$Item = $('.item'); 
$('.content').before($Item); 

問候。

Answer 1

你的意思是這樣的： jsFiddl Link

Answer 2

怎麼是這樣的：

$Item = $('.item'); 
$Item.fadeOut(1000, function() { 
    $('.content').before($Item); 
    $Item.fadeIn(1000); 
} 

的.fadeOut() method消失在指定的時間因素（以毫秒爲單位），並在完成調用函數然後移動元素並將其淡入。

演示：​​

Answer 3

試試這個，

$(function() { 

    $('#btnMove').on('click', function() { 
     $Item = $('.item').fadeOut('slow', function() { 
      $('.content').before($Item); 
      $Item.fadeIn('slow'); 
     }) 

     }); 

    });​ 

Demo

Answer 4

你也可以使用jQuery的hide和show - 方法來實現滑動效果。我還會將轉換封裝在自己的方法中，以便它可以重用，所以您不必多次編寫相同的代碼。

var smoothLikeSilk = function(mover, before) { 
    $item = $(mover); 
    $content = $(before); 
    $item.hide('slow', function() { 
    $content.before($item); 
    $item.show('slow'); 
    }); 
} 

$(function(){ 

    $('#btnMove').on('click',function(){ 
    smoothLikeSilk('.item', '.content'); 
    }); 

}); 

http://jsfiddle.net/9gGAT/6/