jQuery removeClass вызывается в конце slideUp удаляет из всех элементов, не только это

Question

Я действительно борюсь с некоторыми (довольно простыми) jQuery. У меня есть несколько прямоугольников на странице, которые показывают описание ролловера. Когда слайд начинается, класс добавляется, а затем, когда он заканчивается, класс удаляется - это делается с классами, а не при наведении, поэтому стилизация сохраняется до завершения слайда.

Он отлично работает на любом отдельном блоке, но когда я наведите курсор мыши на один блок и прямо на другой, класс удаляется из второго блока и остается в первом, когда первый элемент завершает скольжение вверх.

Вот мой 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");
                }}
            );
        }
    );

});

Я определяю эту функцию в начале как jQuery(это). Когда я переворачиваю второй блок, класс "hover" корректно добавляется ко второму блоку, но когда первый блок завершает.slideUp, класс удаляется из второго блока, а не из первого.

Я ожидал, что контекст этой функции останется в анимации, в которой она была объявлена, но похоже, что второе поле переопределяет оригинальную эту функцию, и, таким образом, когда первая анимация заканчивается, класс удаляется из второго блока, а не из первого.

Что я могу сделать?

Спасибо!

Джон

Answer 1

Вам нужно использовать закрывающие переменные

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");
            }
        });
    });
});

---

Когда вы вводите элемент 1 thisfeature ссылается на этот элемент, затем вы перемещаетесь так, чтобы анимация отпускания мыши запускалась для правильного элемента, но перед тем, как анимация закончится, вы вводите элемент 2, теперь глобальная переменная thisfeature относится к элементу 2, а не к элементу 1, к этому времени анимация отпускания мыши для элемента 1 завершена, и полный обратный вызов вызывается, но теперь thisfeature это элемент 2 вместо элемента 1