javascript - 如何在jquery中使用.before时为元素设置动画

Question

我想在 .content 元素之前附加 .item 元素，但它只是从以前的位置删除 .item 并在 .content 之前附加。

我想要的是使用一些动画，将 .item 元素从其原始位置缓慢移除并缓慢出现在其新位置上。我该怎么做？

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

问候。

Answer 1

像这样的东西怎么样：

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

该.fadeOut()方法在指定的时间内（以毫秒为单位）淡化元素，并在完成时调用该函数，然后移动元素并将其淡入。

演示：http: //jsfiddle.net/9gGAT/5/

Answer 2

也可以使用jquery的and-方法来实现滑动效果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/

Answer 3

你的意思是这样的： jsFiddl Link

Answer 4

试试这个，

$(function() {

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

        });

    });​

演示