Эффект JQuery продолжает повторяться

Question

Эффект JQuery продолжает повторяться

0

У меня есть div внутри родительского div, который обычно скрыт. Когда вы наводите курсор на родительский div, тогда он будет виден. Я использую JQuery.toggle(), чтобы получить этот эффект. Проблема в том, что если вы MouseIn и MouseOut очень быстро, многократно над родителем, дочерний div многократно переключается. Есть ли способ предотвратить это, он замедляет мою страницу?

JSFIDDLE: http://jsfiddle.net/vY59g/1/

Мой JQuery:

$(document).ready(function() {
    $(".result").hover(function() {
        $(this).find(".result-user-facts").toggle("slow");
    });
});

user2320500 13 нояб. 2013, в 04:32

Источник

Теги:

jquery

3 ответа

Ещё вопросы

Santino_Wu · Answer 1 · 2013-11-13T03-39-00.000Z

Если вы хотите улучшить ситуацию, просто поместите div:.result-user-Facts в переменную, если она есть. Как это:

$(function (){
    var container = $(".result");
    var item = container.find(".result-user-facts").eq(0);
    $(".result").hover(function (){
        item.stop().toggle("slow");
    });
});

Arun P Johny · Answer 2 · 2013-11-13T01-23-00.000Z

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

Решение состоит в том, чтобы остановить и очистить предыдущие анимации до вызова вызова с помощью .stop()

$(document).ready(function() {
    $(".result").hover(function() {
        $(this).find(".result-user-facts").stop(true, true).toggle("slow");
    });
});

Демо: скрипка

Tushar Gupta · Answer 3 · 2013-11-12T23-44-00.000Z

Используйте .stop(true, true)

Остановите текущую анимацию на согласованных элементах.

Fiddle DEMO

$(document).ready(function() {
    $(".result").hover(function() {
        $(this).find(".result-user-facts").stop(true,true).toggle("slow");
    });
});