JQuery - Combinaison de la largeur et des effets de masquage

Question

Débutant complet, donc je manque probablement quelque chose d'évident mais ... Je n'arrive pas à combiner un effet animé (largeur) avec un effet this.hide, je peux faire l'un ou l'autre travailler en commentant l'autre. Voici le code:

function showSlidingDiv(column){ 
var maxWidth = 200; 
var smallWidth = 80; 
var myWidth = $(column).width(); 


$("div").each(function(){ 
     $(this).animate({width: smallWidth}); 
     $(this).hide(); 
    }); 

$(column).show(); 
$(column).animate({width: maxWidth}); 
} 

J'utilise ceci sur une grande table d'informations afin que l'utilisateur peut cliquer sur une rubrique e et d'élargir cette colonne d'information tout en réduisant tous les autres. Chaque td a une div à l'intérieur qui est en train d'être étendue ou contractée. Je voudrais aussi cacher, si possible par animation, les divs dans les autres colonnes en même temps. Comme je l'ai dit, cela fonctionnera pour l'un ou pour l'autre, mais pas pour les deux ensemble.

Toute aide appréciée. Merci. Il suffit d'utiliser les fonctions de rappel.

Answer 1

.hide() est pas une fonction en file d'attente, vous devez soit appeler dans un rappel .animate(), comme ceci:

$("div").animate({width: smallWidth}, function() { 
    $(this).hide(); 
}); 

Ou en faire une fonction mis en attente avec cette astuce:

$("div").animate({width: smallWidth}).hide(0); 

Dans les deux cas, le .each() n'est pas nécessaire car le code ci-dessus s'applique à toutes les correspondances.

Answer 2

Comme:

function showSlidingDiv(column) { 
    var maxWidth = 200; 
    var smallWidth = 80; 
    var myWidth = $(column).width(); 


    $("div").each(function() { 
    $(this).animate({width: smallWidth}, 1000, function() { 
     // this callback is executed when the animation is done 
     $(this).hide(); 
    }); 
    }); 

    $(column).show(); 
    $(column).animate({width: maxWidth}); 
} 

Answer 3

La fonction d'animation jQuery peut être utilisée avec une fonction de rappel qui s'exécute une fois l'animation terminée, ce qui devrait accomplir ce que vous essayez de faire.

$("div").each(function(){ 
    $(this).animate({width: smallWidth}, 1000, function() { 
     $(this).hide(); 
    }); 
}); 

Answer 4

Le problème est que seules les méthodes d'animation sont chaînées (les unes après les autres). Pour hide() une méthode d'animation, vous devez spécifier une durée, donc au lieu de

$(this).animate({width: smallWidth}); 
    $(this).hide(); 

écrire

$(this).animate({width: smallWidth}); 
    $(this).hide(0); 

ou moins

$(this).animate({width: smallWidth}).hide(0);