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

#jquery #animation #jquery-events #dom-manipulation

#jquery #Анимация #jquery-события #dom-манипуляция

Вопрос:

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

 $("#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, она просто появляется. Не уверен, в чем проблема — пожалуйста, дайте мне знать!

Ответ №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');
});

Ответ №2:

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

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

Ответ №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