Comment animer un élément tout en utilisant .avant dans jquery

Question

Je veux ajouter élément .item avant élément .content mais juste .item supprime simplement de l'emplacement précédent et lui avant .content.

Ce que je veux est d'utiliser une animation qui éliminent lentement élément .item de sa position d'origine et apparaissent lentement sur sa nouvelle position .. comment puis-je faire cela?

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

Cordialement.

Answer 1

Voulez-vous dire quelque chose comme ceci: jsFiddl Link

Answer 2

Que diriez-vous quelque chose comme ceci:

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

Le .fadeOut() method s'estompe l'élément sur le temps spécifié (en millisecondes), et à la fin appelle la fonction qui déplace ensuite l'élément et le remet en place.

Démo: http://jsfiddle.net/9gGAT/5/

Answer 3

Essayez ceci,

$(function() { 

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

     }); 

    });​ 

Demo

Answer 4

Vous pouvez également utiliser les hide et show -méthodes de jquery pour obtenir un effet de glissement. Je placerais également la transition dans sa propre méthode pour qu'elle puisse être réutilisée, de sorte que vous n'ayez pas à écrire plusieurs fois le même code.

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/