jQuery setTimeout avec animation

Question

J'ai un ensemble CSS qui après 2 secondes je veux revenir à leurs positions définies.

J'utilise ceci:

setTimeout(function() { 
     $("div").css("z-index", ""); 
     $("div").css("height", ""); 
     $("div").css("width", ""); 
     $("div").css("marginLeft", ""); 
     $("div").css("marginTop", ""); 
}, 2000); 

Alors ce que cela fait est essentiellement envoie cinq divs différents endroits à retour sur toute la page au bout de 2 secondes. La charge qu'ils font ceci:

$(document).ready(function() { 
     $("div").css("z-index", ""); 
     $("#tablet,#phone,#television,#web,#social,#fusion").css({ 
      width: "500px", 
      height: "350px", 
      marginLeft: "30%", 
      marginTop: "25px", 
     }, 750); 
}); 

Je me demandais si vous les gars savent comment animer les événements au bout de 2 secondes. En ce moment, ça se passe vite mais je voudrais que ce soit une animation de retour à leurs états initiaux.

J'utilise cela pour animer les 5 divs tout dans une zone onclick:

$("#tablet,#phone,#television,#web,#social,#fusion").animate({ 
      width: "500px", 
      height: "350px", 
      marginLeft: "30%", 
      marginTop: "25px", 
     }, 750); 

Merci!

Answer 1

Appelez-moi fou, mais il semble que vous ayez la réponse à votre propre question ici. Vous savez déjà comment utiliser jquery animer, alors pourquoi ne pas l'utiliser au lieu de simplement redéfinir le css dans votre setTimeout?

setTimeout(function() { 
     $("#tablet,#phone,#television,#web,#social,#fusion").animate({ 
      width: "0px", 
      height: "0px", 
      marginLeft: "0%", 
      marginTop: "0px", 
     }, 750); 
}, 2000); 

J'ai mal lu votre question? Ou est-ce que vous ne voulez pas que vos éléments aient une largeur et une hauteur 0px, mais vous voulez que ces déclarations CSS soient entièrement supprimées?

EDIT

Ok, donc selon votre explication que vous les voulez revenir à leurs états déjà définis. Je présume que vous voulez dire AVANT la déclaration de charge qui redéfinit leur position, non? Cela signifie-t-il que vous agissez avec la compréhension que l'état précédent n'est pas connu et est abstrait et que vous voulez savoir comment récupérer cette information? Ou voulez-vous dire très simplement que vous connaissez l'état dans lequel vous voulez revenir et que vous ne savez pas comment le dire pour qu'il y soit animé?

fichier css:

#div{ 
    margin-left:20%; 
    margin-top:20%; 
} 

jquery:

$(document).ready(function(){ 
    $('#div').css({marginTop:'50%', marginLeft:'50%'}); 


    setTimeout(function() { 
     $("#div").animate({ 
      marginLeft: "20%", 
      marginTop: "20%", 
     }, 750); 
    }, 2000); 
}); 

Donc ce serait si vous saviez le css souhaité revenir. Si vous ne saviez pas, vous pouvez faire quelque chose comme ceci:

$(document).ready(function(){ 
    var div = new Array(); 
    div.push($('#div').css('margin-top')); 
    div.push($('#div').css('margin-left')); 

    $('#div').css({marginTop:'50%', marginLeft:'50%'}); 


    setTimeout(function() { 
     $("#div").animate({ 
      marginLeft: div[0], 
      marginTop: div[1], 
     }, 750); 
    }, 2000); 
}); 

Answer 2

Dans cette situation, je me suis appuyé sur la méthode clone de jQuery. Vous pouvez masquer l'élément d'origine et utiliser le clone pour votre animation. Pour restaurer l'original, il suffit de détruire le clone et d'afficher l'original.

Clone Documentation

Answer 3

Si je comprends bien votre question, vous avez un tas d'éléments dans des positions « naturelles » sur la page. Vous voulez les déplacer vers une nouvelle position, puis les ramener plus tard à leurs positions initiales respectives.

Mis à part la question de l'animation, une solution serait de capturer la position initiale de chaque élément et d'autres attributs, et de stocker cette information sur l'élément lui-même en utilisant data().Dans votre fonction "reset", vous pouvez ensuite référencer ces données pour réinitialiser chaque élément. Donc, quelque chose comme ça (non testé):

// in your $(document).ready() handler: 
$('div').each(function() { 
    var original = { 
    w: $(this).width(), 
    h: $(this).height(), 
    o: $(this).offset() 
    }; 
    $(this).data('orig', original); 
}); 

Chaque div sait maintenant d'où il vient. Vous les déplacez ensuite comme vous le souhaitez. Quand il est temps de les retourner:

var backToOriginal = function() { 
    $('div').each(function() { 
    var $d = $(this).data('orig'); 
    $(this).animate({ 
     'top': $d.o.top, 
     'left': $d.o.left, 
     'width': $d.w, 
     'height': $d.h 
    }); 
    }); 
}; 
setTimeout(backToOriginal, 1000); // animate to original position after 1 sec 

Changez l'animation et retards au goût.

Voici un exemple de travail: http://jsfiddle.net/redler/LQyeh/

Dans un premier temps les éléments sont dispersés au hasard (dans votre cas, ils seraient dans leur position naturelle en fonction de votre balisage). Lorsque vous déclenchez la routine, ils sont mutés et déplacés vers une seule position. Après un délai, ils reviennent doucement à leur position et à leur taille initiales.