Animation de cascade div en javascript/jquery

J'essaye d'animer une cascade de divs comme sur duitang.com. J'ai essayé les scripts suivants:Animation de cascade div en javascript/jquery

http://jsfiddle.net/XKdKt/3/
http://jsfiddle.net/NFPKc/

Le deuxième lien semble que c'est le plus proche de ce que je veux parce que la div apparaît de bas en haut, contrairement au premier et second lien, mais la div sous doesnt rouleau avec la nouvelle div.

Quelqu'un peut-il me diriger dans la bonne direction pour le rendre semblable à celui de duitang?

Votre aide serait grandement appréciée. Merci.

Source

2012-01-22 user646658

Vous créez divs dans vos exemples. Sur duitang.com, les divs existent déjà. Ils sont masqués car ils se trouvent dans une balise DIV dont la hauteur et la largeur sont définies et le dépassement est défini sur caché. Ensuite, je suppose que le padding (ou une autre valeur) est modifié avec javascript pour faire descendre les DIVs internes, et que le DIV suivant soit visible. – bozdoz

Quelque chose comme cela devrait fonctionner:

$('#gen').click(function() { 
    var div = $('<div><h6>Another</h6><p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p></div>').prependTo('body'); 

    var height = div.outerHeight(); 
    div.css({ 
     "marginTop": -height, 
     "opacity": 0 
    }).animate({ 
     "marginTop":0, 
     "opacity": 1 
    }, "slow"); 
});

Exemple: http://jsfiddle.net/petersendidit/NFPKc/7/

Source

2012-01-23 01:26:09 PetersenDidIt

Merci. J'allais répondre à ma propre question en utilisant marginTop comme vous l'avez fait, mais je ne pouvais pas parce que je n'ai pas assez de points de rep. – user646658

Animation de cascade div en javascript/jquery

Répondre

Questions connexes