jQuery "це" для відокремлення hovers - jquery, slideown, slideup, jquery-hover

У мене є користувальницький плеєр, який використовує мій клієнт, і вони за допомогою JavaScript вони мені дали це погано ... справді погано. Мені дуже не хочеться повторювати його з нуля, тому я подумав, що можу взяти їх оригінальний код

var togglePlayer = function(){
$(".jp-gui").slideUp();
$("#jp_container, #jp_container2").hover(
function () {
$(".jp-gui").slideDown();
},
function () {
$(".jp-gui").slideUp();
}
);
};

Я спробував виправити це за допомогою цього:

var togglePlayer = function(){
$(".jp-gui").slideUp();
$("#jp_container, #jp_container2").hover(
function () {
$(this + ".jp-gui").slideDown();
},
function () {
$(this + ".jp-gui").slideUp();
}
);
};

Тепер це шви, щоб просто не прийняти наближення. Я повністю переписав це на .toggleSlide, який вирішив проблему наведення курсора, але створив ще 10 проблем.

Хтось знає просте виправлення, так що коли я наведіть курсор на #jp_container, це не робить анімації наведення курсора на # jp_container2 і навпаки?

Відповіді:

3 для відповіді № 1

$("#jp_container, #jp_container2").hover(function() {
$(this).find(".jp-gui").stop(true, true).slideToggle();
});

---

0 для відповіді № 2

        function () {
$(this + ".jp-gui").slideDown();
},

this, в контексті обробника подій jQuery - це елемент DOM, до якого обробник був приєднаний (або делегований у разі делегування події). Перетворення його в рядок не принесе користі.

Спробуйте:

        function () {
$(".jp-gui", this).slideDown();
},

(тоді другий аргумент називається контекстом) або

        function () {
$(this).find(".jp-gui").slideDown();
},

замість цього. Обидва виберуть усіх .jp-gui елементи в межах цілі події (#jp_container або #jp_container2)

---

Якщо ви хочете внести подальші зміни, зверніть увагу

#jp_container, #jp_container2 іноді можуть бути замінені на [id^="jp_container"] (виберіть усі елементи, ідентифікатор яких починається із зазначеного рядка). Додавання загального класу до обох контейнерів було б ще краще.

Також, як зазначає @Michael, пара slideUp/slideDown може бути замінений одиничним slideToggle. Це не завжди є найкращим рішенням, але воно скорочує код.

@Michael також пропонує припинити попередню анімацію stop(true, true). Якщо ви не зупиняєте анімацію, наступнубуде затримкоюватися після того, як поточна анімація (ззахищена), що може призвести до того, що елемент неодноразово ковзатиме вгору та вниз після створення декількох подій наведення вказівника. Якщо контейнер змінить розмір або його дитина втече з його контейнера, без stop, можливо навіть отримати нескінченний цикл, якщо кожна анімація викликає додаткову подію наведення.

---