Comment lisser glisser pour ajuster la hauteur du contenu après une glissade dans jQuery?

Question

J'ai une question dont je ne suis pas trop sûre. Voici mon scénario. J'ai une série d'éléments de liste avec des liens. Chaque fois qu'un lien est cliqué, il insère une image de "chargement" dans une travée et la glisse vers le bas. Une fois l'opération terminée, l'image "loading" est supprimée et le contenu est mis en place. Le problème n'est pas avec le slideDown lui-même, mais après l'opération est terminée. Voici mon code:

<ul> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a></li> 
    <li><a href="#">Item 3</a></li> 
    <li><a href="#">Item 4</a></li> 
    <li><a href="#">Item 5</a></li> 
</ul> 

Et le correspondant jQuery:

$("ul li a").click(function() { 
    var t = $(this).parent(); 

    $(t).append("<span class='content'><img class='loading' style='display:block;' src='../../Content/loading.gif' /></span>"); 
    $(".content").hide().slideDown("slow"); 

    $.getJSON("/Home/DoStuff/?ran=" + ran, null, function() { 
     var span = $(t).find(".content"); 
     $(span).html("blah"); 

     $(".loading").remove(); 
    }); 
}); 

Et enfin, le CSS pour cela:

.content { display:block;border:1px solid red; } 
img.loading { padding: 1em; } 

Ainsi, dans ce cas, l'image de chargement est inséré dans la durée avec un rembourrage 1em et ajouté à l'élément de la liste. La portée est ensuite glissée pour lui donner un bel effet. Chaque fois que l'opération est terminée et que le contenu est inséré, l'intervalle "saute" jusqu'à la hauteur du contenu. Je me demandais comment je pouvais animer le changement de hauteur d'accommoder la hauteur de l'image rembourrée à la hauteur du contenu. Merci.

Answer 1

Vous devez faire quelque chose comme ceci:

$.getJSON("/Home/DoStuff/?ran=" + ran, null, function(data) { 
    var div = t.children(".content"); 
    var h = div.height(); 

    div.html(data); 
    var i = div.height(); 
    div.height(h); 

    div.animate({ 
     height: i 
    }, 500); 

    t.children(".loading").remove(); 
}); 

Avis, après la mise en l'élément « de chargement » avec toutes les données que vous êtes de retour, vous voulez obtenir la hauteur de la nouvelle substance, puis immédiatement mis la hauteur de ce qu'il était avant que la nouvelle substance a été commuté. De là, vous pouvez animer à la hauteur de la nouvelle substance.

Answer 2

Je voudrais permuter la durée pour un div et définir une hauteur spécifique pour assurer une animation en douceur. Voir l'article de Remy here.

Egalement dans votre code, utilisez une variable appelée t. Vous n'avez pas besoin de continuer à l'utiliser avec $() car il s'agit déjà d'un objet jquery.