jQuery .append один раз за раз (в настоящее время выполняется несколько раз)

Question

У меня возникла проблема с добавлением. Я использую «mouseenter» и «mouseleave» вместо onhover, так что append не происходит миллион раз, однако у меня по-прежнему возникает проблема с тем, что люди входят и оставляют свои мыши много раз в div.

Чтобы увидеть эту проблему, перейдите на страницу http://mercury-consulting.theportlandco.com/ и разместите на баннере «облако» на 20% пути вниз по странице. Если вы затем перемещаете свою мышь и снова повторяете несколько раз подряд, добавление происходит несколько раз, создавая слои и слои.

Это пример моего кода:

$("#cloud1").live("mouseenter", function() { 
$(this).append('<div class="cloud1" style="display:none"><img src="http://mercury-consulting.theportlandco.com/wp-content/uploads/2010/10/1.png" width="470" height="270"/></div>') 
.find('div.cloud1').show("slide", { direction: "down" }, 1100); 
}); 

$("#cloud1").live("mouseleave", function() { 
$(".cloud1").hide("slide", { direction: "down" }, 1100, function() { 
    $(this).remove(); 
}); 
}); 

Answer 1

попробуйте добавить .stop() до .show() и .hide() он остановится анимации

Answer 2

Использование .stop(true, true) на объекте, анимированы, чтобы отменить предыдущую анимацию.

---

Edit: на самом деле, глядя на ваш код, который вы могли бы сделать что-то разрешить следующее:

$('#cloud1, #cloud2, #cloud3').hover(function() { 
    var id = $(this).attr('id'); 

    // If a div isn't already available/animating, then create it 
    if (!$('div.' + id).length) 
    { 
     // Create and show the div 
    } 
    }, function() { 
    // slide the div down 
    } 
); 

Answer 3

Вы могли бы иметь флаг и проверить, выключен ли он, и если да, добавьте слой и включите флаг; иначе, не добавляйте слой.

Answer 4

У вашего кода все еще есть проблемы. Проверьте скриншот я принял после того, как вы реализовали stop() на вашем сайте:

воспроизведут ошибку, держа наведите курсор мыши на и из DIV активации («Облако основе», например) пару раз перед тем в show animation заканчивается, а затем просто наведите указатель мыши на «Cloud based».

Какие другие говорили (проверка, если есть уже .cloud1 слой там) может быть интегрирована в ваше решение с append(function (idx,html)) синтаксиса (док является here):

$("#cloud1").bind("mouseenter", function() { 
    $("#cloud1").append(function(idx, html) { 
     if ($(html).find('.cloud1').size() == 0) { 
      return '<div class="cloud1" style="display:none"><img src="http://mercury-consulting.theportlandco.com/wp-content/uploads/2010/10/1.png" width="470" height="270"/></div>'; 
     } 
    }).find('.cloud1').stop().show("slide", { direction: "down" }, 1100); 
}); 

Наконец, я использовал bind вместо live, потому что:

Этот метод (live()) является вариантом базового метода .bind() для привязки обработчиков событий к элементам. Когда вызывается .bind(), элементы, которые объект jQuery ссылается на получение прикрепленного обработчика; Элементы, которые вводятся позже, не являются, поэтому для них потребуется другой вызов .bind().

Поскольку у вас есть только одно облако #, и никакие другие не представлены позже, вам не нужно жить().