jQuery removeClass called at end of slideUp removes from all elements not just this

Question

I am really struggling with some (pretty simple) jQuery. I have a few boxes on a page that slide up a description on rollover. As the slide starts a class is added and then when it ends the class is removed - this is done with classes rather than hover so that the styling remains until the slide completes.

It works fine on any individual box but when I mouse off one box and straight onto another the class gets removed from the second box and left on the first as the first item completes the slide up.

Here is my jquery:

jQuery(document).ready(function () {

    // Rollover on features
    jQuery(".TitleImageBlurbandLinkWrapper a").hover(
        function () {
            thisfeature = jQuery(this);

            // change class when slide starts
            thisfeature.addClass("hover");
            // Show info sliding up
            thisfeature.find(".blurb").stop(true, true).slideDown();
        }, function () {
            // hide info
            thisfeature.find(".blurb").stop(true, true).slideUp({ queue: false, complete: function() {
                    // change class when slide finishes
                    thisfeature.removeClass("hover");
                }}
            );
        }
    );

});

I define thisfeature at the start as jQuery(this). As I roll over the second box the class "hover" is correctly added to the second box but as the first box completes .slideUp the class is removed from the second box and not the first.

I expected the context of thisfeature to remain within the animation it was declared in but it seems like the second box redefines the original thisfeature and thus when the first animation ends the class is removed from the second box and not the first.

What can I do?

Thanks!

John

Answer 1

You need to use closure variables

jQuery(document).ready(function () {

    // Rollover on features
    jQuery(".TitleImageBlurbandLinkWrapper a").hover(function () {
        var thisfeature = jQuery(this);
        // change class when slide starts
        thisfeature.addClass("hover");
        // Show info sliding up
        thisfeature.find(".blurb").stop(true, true).slideDown();
    }, function () {
        var thisfeature = jQuery(this);

        // hide info
        thisfeature.find(".blurb").stop(true, true).slideUp({
            queue: false,
            complete: function () {
                // change class when slide finishes
                thisfeature.removeClass("hover");
            }
        });
    });
});

---

When you enter element 1 thisfeature refers to that element, then you move out so the mouseleave animation is triggered for the correct element, but before the animation is over you enter element 2 now the global variable thisfeature is referring to element 2 not element 1 by this time the mouseleave animation for element 1 is over and the complete callback is called but now thisfeature is element 2 instead of element 1