Функция обратного вызова JQuery slideUp, когда начальный селектор включает в себя дочерний объект

Question

Как добавить функцию обратного вызова к функции slideUp(), если исходный селектор, который я использую, содержит children()?

$('.homebuttonbutton').hover(function() { 
     $(this).stop().children('.homebuttonaction').slideDown(); 
     $(this).children('.homebuttonlabel').addClass('whitebutton'); 
    }, function() { 
     $(this).stop().children('.homebuttonaction').slideUp(300, function() { 
      $(this).children('.homebuttonlabel').removeClass('whitebutton'); 
     }); 
     //$(this).children('.homebuttonlabel').removeClass('whitebutton'); 
    }); 

Так в идеале, когда парил, ребенок .homebuttonaction скользит вниз и имеет .whitebutton класс добавляемые, а затем, когда не-парили, что .homebuttonaction скользит вверх и .whitebutton класс удаляется.

Я надеюсь, что класс удален ПОСЛЕ завершения анимации slideUp, но я не уверен, как его выбрать, поскольку начальный селектор использует children для функции обратного вызова.

Там собираются быть несколько .homebuttonaction классов, поэтому я не могу просто использовать

$('.homebuttonaction').removeClass('.whitebutton'); 

, потому что тогда он будет применяться к каждому, не так ли? Выполняет ли функция обратного вызова $(this) как элемент, выбранный в первую очередь, или как текущий выбранный элемент, найденный через children()?

Спасибо за помощь, ТАК.

EDIT Вот моя скрипка - http://jsfiddle.net/kcxWc/ - как вы можете видеть, класс не удаляется, как это должно быть после эффекта slideUp закончится. Я считаю, что это вопрос выбора ...

Answer 1

this будет относиться к .homebuttonbutton объекта в MouseEnter/MouseLeave calbacks, а также к .homebuttonlabel объекта в обратном вызове slideUp.

Для обратного вызова .homebuttonbutton внутри обратного вызова вы можете увидеть дерево доминирования или зафиксировать ссылку на него в закрытии.

обходе дерева DOM:

$(this).stop().children('.homebuttonaction').slideUp(300, function() { 
    $(this).closest('.homebuttonbutton').children('.homebuttonlabel').removeClass('whitebutton'); 
}); 

Захват в затворе:

var homeButton = $(this); 
$(this).stop().children('.homebuttonaction').slideUp(300, function() { 
    homeButton.children('.homebuttonlabel').removeClass('whitebutton'); 
}); 

Answer 2

Вам не всегда приходится полагаться на ключевое слово «this». Эти функции передаются объекту события, и вы можете найти «элемент, выбранный» свойством event.target. Например.

$('.homebuttonbutton').hover(function(event) { 
    var onlyTheButtonThatWasClicked = event.target; 
});