How to animate an element while using .before in jquery

Question

I want to append .item element before .content element but it just simply removes .item from previous location and append before .content.

What i want is to use some animation that slowly remove .item element from its original position and appear slowly on its new position.. how can i do this?

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

Regards.

Answer 1

How about something like this:

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

The .fadeOut() method fades the element over the specified time (in milliseconds), and on completion calls the function which then moves the element and fades it back in.

Demo: http://jsfiddle.net/9gGAT/5/

Answer 2

You can also use the hide and show -methods of jquery to achieve a sliding effect. I'd also package the transition within it's own method so it can be reused, so you don't have to write the same code multiple times.

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链接

Answer 4

Try this,

$(function() {

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

        });

    });​

Demo