jQuery/CSS PAS sélecteur et stop() question

Question

Voici mon site:

http://www.raceramps.com/v2

Déplacez votre souris sur le menu sur le côté droit. Remarquez comment l'affichage du service de voiture, de la remorque et de l'affichage & est entièrement agrandi par défaut. C'est parce qu'ils sont des produits de vente plus élevés, et la plupart des gens qui consultent ce site sont à la recherche de ceux-ci.

Actuellement il y a une configuration de menu accordéon en utilisant le code suivant:

$(function(){ 
    $('.buttonEffectWrapper').hover (
     function() { 

      var effect = $(this).siblings().filter(":last"); 
      effect.stop().animate ({ opacity: 1}, { duration: 300 }); 

      $(this).stop().parent().animate({height: "110px"}, {duration: 300 });//accordion effect here 


     }, 
     function() { 
        var effect = $(this).siblings().filter(":last"); 
        effect.stop().animate ({ opacity: 0}, { duration: 300 }); 

        $(this).stop().parent().animate({height: "30px"}, {duration: 300 });//accordion effect here 

     } 
    ); 
}); 

Tout d'abord, si vous déplacez la souris horizontalement sur l'un des boutons plusieurs fois, il construit une file d'attente. Je pensais que l'utilisation de stop() était censée résoudre ce problème, mais cela ne semble pas être le cas. Deuxièmement, je ne veux pas que les trois premières divs (# car-service, # trailer-haluling et # display-and-show) s'effondrent quand la souris part. J'ai essayé ce qui suit, mais il sélectionne tout autrement.

$(this + ":not(#car-service, #trailer-hauling, #display-and-show)").stop().parent().animate({height: "30px"}, {duration: 300 }); 

et en troisième lieu, si vous mouseover une div, puis passer à l'autre en dessous, comme un div se développe et les autres effondrements, votre souris se retrouve dans une position que vous ne l'intention. La seule façon dont je peux penser à résoudre ce problème est de ne pas laisser le div précédent s'effondrer. Donc, si je souris #car-service, puis #trailer-hauling, #car-service ne devrait pas s'effondrer. Mais si je passe de #trailer-hauling à #show-and-display, alors je veux #car-service de se contracter. Cela devrait empêcher l'interface d'être cassée.

Answer 1

if(!$(this).is("#car-service, #trailer-hauling, #display-and-show")){ 
    $(this).parent().animate({height: "30px"}, {duration: 300, queue:false}); 
} 

$(this) se réfère à un seul élément (ou un groupe d'éléments) dans le DOM. Je pense qu'il est préférable de tester si c'est un attribut particulier ou de le filtrer, plutôt que de jouer avec le sélecteur $(this).

Answer 2

premier dans l'argument deuxième options animate(), vous pouvez spécifier la file d'attente:

effect.animate({ 
    opacity: 1 
},{ 
    duration: 300, 
    queue: false 
}); 

seconde Essayez ceci:

$(this).filter(function() { 
    return !this.id.match(/^(car-service||trailer-hauling||display-and-show)$/); 
}).someMethod()...