jQuery / CSS NOT selector, and stop () question

Question

Here is my site:

http://www.raceramps.com/v2

Move your mouse over the menu on the right side. Notice how Car Service, Trailer Hauling, and Show & Display are fully enlarged by default. This is because they are higher selling products, and most people who view this site are looking for those.

Currently there is an accordion menu setup using the following code:

$(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

        }
    );
} );

Firstly, if you move the mouse horizontally over one of the buttons several times, it builds a queue. I thought using stop() was supposed to fix this, but it doesn't seem to be.

Secondly, I don't want the first three divs (#car-service, #trailer-hauling, and #display-and-show) to collapse when the mouse leaves. I tried the following, but it selects everything else.

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

and thirdly, if you mouseover one div, and then move to one below it, as one div expands and the other collapses, your mouse ends up in a position you wouldn't intend. The only way I can think of to fix this is to not allow the previous div to collapse.

So if I moused over #car-service, then went to #trailer-hauling, #car-service shouldn't collapse. But If I move from #trailer-hauling to #show-and-display, then I want #car-service to contract. This should prevent the interface from being broken.

Answer 1

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

$(this) refers to a single element (or group of elements) in the DOM. I think it best to test whether it is/has a particular attribute or filter it, rather than playing with the $(this) selector.

Answer 2

first in the animate() second options argument, you can specify the queue:

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

second Try this:

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