Problème avec jQuery Animation

Question

Je suis assez nouveau pour jQuery et j'ai des problèmes avec une animation que j'aimerais faire.

Dire que j'ai quelques gouttes bas pour filtrer le contenu qui utilisent ce code HTML:

<table class="calFilter"> 
    <tr> 
     <th> 
      <label for="ddlDept">Show events hosted by:</label> 
     </th> 
     <th> 
      <label for="ddlEventType">Select event type:</label> 
     </th> 
    </tr> 
    <tr> 
     <td> 
      <select name="ddlDept" id="ddlDept" class="deptDropDown"> 
       <option value="">All</option> 
       <option value="cfys">Community, Family, &amp; Youth Services</option> 
       <option value="conser">Conservation Board</option> 
       <option value="emergm">Emergency Management</option> 
       <option value="health">Health Department</option> 
      </select> 
     </td> 
     <td> 
      <select name="ddlEventType" id="ddlEventType"> 
       <option value="0">All</option> 
      </select> 
     </td> 
     <td> 
      <input type="submit" name="cmdGo" value="Go" id="cmdGo" /> 
     </td> 
    </tr> 
</table> 

Si vous sélectionnez un autre département, ne font plus de sens, donc je voudrais les types d'événements cacher le type d'événement Étiquetez et laissez tomber quand les changements de Dept descendent. J'ai eu ceci pour fonctionner en utilisant le rappel d'événement de changement pour le menu déroulant et la commande hide() simple. Mais si j'essaie d'utiliser l'animation, les choses vont mal. Les contrôles ne glissent pas comme je le devrais, l'animation se produit à chaque fois, même si les contrôles sont déjà cachés, etc.

Je voudrais une sorte de joli fondu ou diapositive, ou une combinaison de ces deux. Comment ferais-tu ceci?

Answer 1

Je pense que c'est parce que vous avez les éléments dans une disposition de table que l'animation agit drôle. Pour surmonter cela, vous pouvez masquer les éléments <td> dans lesquels se trouvent également les éléments que vous souhaitez masquer.

Voici un Working Demo qui a été testé et fonctionne sous Firefox 3.5 et IE6. Ajoutez /edit à l'URL si vous voulez jouer avec.

Le code de la démo

$(function() { 

    $('#ddlDept').change(function() { 
     var label = $('label[for="ddlEventType"]'); 

     if (label.is(":visible")) { 
      label.parent().animate({ width: "0px" }).hide().end().hide(); 
      $('#ddlEventType').parent().animate({ width: "0px" }).hide().end().hide(); 
     } 
    }); 

}); 

EDIT:

Comme il est indiqué dans les commentaires, voici un Working Demo qui utilise fadeTo() d'abord disparaître les éléments avant d'animer et de se cacher.

Le code de la démo

$(function() { 

    $('#ddlDept').change(function() { 
     var label = $('label[for="ddlEventType"]'); 
     var select = $('#ddlEventType'); 

     if (label.is(":visible")) { 
      label.fadeTo("slow", 0.01, function() { 
        label.parent() 
         .animate({ width: "0px"}, 500) 
         .hide() 
         .end() 
         .hide(); 
       }); 
      select.fadeTo("slow", 0.01, function() { 
        select.parent() 
         .animate({ width: "0px"}, 500) 
         .hide() 
         .end() 
         .hide(); 
       }); 
     } 
    }); 

}); 

Answer 2

Essayez d'utiliser slideDown() au lieu de hide() ou voir l'un des nombreux autres construits dans le show/animations masquer à jquery.com

Si elle est animant encore alors qu'il est déjà caché, ajouter quelque chose comme ceci dans votre code:

if($('select#ddlEventType').not(':hidden')){ 
     $(this).slideDown(); 
} 

Answer 3

Vous devez d'abord vérifier si elle est visible ou non:

// Callback function 
function() { 
    var obj = $(this); 
    if (obj.is(':visible')) { // make sure you're checking the visibility of one or both of the objects that are being hidden 
     // hide 
    } else { 
     // show 
    } 
} 

Answer 4

tables sont assez pointilleux w Quand il s'agit d'animation. fadeOut devrait fonctionner avec des tables, vous aurez des résultats mitigés sur les différents navigateurs avec beaucoup d'autres effets.