JQuery - .append () с .fadeIn () не работает

Question

У меня возникли проблемы с работой:

$("#cloud1").live("mouseenter", function() {
$(this).append('<div class="cloud1"><img src="http://mercury-consulting.theportlandco.com/wp-content/uploads/2010/10/1.png" width="470" height="400"/></div>');
$(this).fadeIn('slow');
});

Когда я наведу курсор на div, оно не исчезает, оно просто появляется. Не уверен, в чем проблема - пожалуйста, дайте мне знать!

Answer 1

Ваш элемент уже виден. Попробуйте этот пример

$("#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="400"/></div>')
    .find('div.cloud1').fadeIn('slow');
});

Answer 2

Проблема в том, что когда вы добавляете div, он уже станет видимым. Таким образом, вы должны скрыть это заранее. Проверьте мою Live Demo .

$("#cloud1").live("mouseenter", function() {
  $('<div class="cloud1"><img src="http://mercury-consulting.theportlandco.com/wp-content/uploads/2010/10/1.png" width="470" height="400"/></div>')
    .hide()
    .appendTo(this)
    .fadeIn('slow');
});

Альтернативным решением может быть добавление этого в таблицу стилей:

.cloud1 { display: none; }

Таким образом, при добавлении чего-либо с классом cloud1 по умолчанию оно будет скрыто, поэтому fadeIn() будет работать как положено.

Приложение: вы также можете захотеть проверить, был ли div уже добавлен, потому что в противном случае всякий раз, когда происходит событие mouseenter, добавляется новый div.

Answer 3

$("#cloud1").live("mouseenter", function() {
    var div = $('<div class="cloud1"><img src="http://mercury-consulting.theportlandco.com/wp-content/uploads/2010/10/1.png" width="470" height="400"/></div>').hide(); 
    $(this).append(div);
    div.fadeIn('slow');
});

Пример JSFiddle