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

Question

У меня проблема с дополнением.Я использую "mouseenter" и "mouseleave" вместо onhover, чтобы добавление не происходило миллион раз, однако у меня все еще остается проблема с людьми, которые вводят и оставляют свои мыши кратными на 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) на анимированном объекте, чтобы отменить предыдущую анимацию.

---

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

$('#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

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

Воспроизведите ошибку, проводя мышью над и после активации div (например, «На основе облака») пару раз до того, как анимация показа закончится, затем просто наведите курсор мыши на «На основе облака».

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

$("#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 ().

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

Answer 4

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