CODEWITHSUNDEEP
jqueryanimationjquery-eventsdom-manipulation
Zach Nicodemous
Zach Nicodemous

Reputation: 9497

jQuery - .append() with .fadeIn() not working

I am having some trouble getting this working:

$("#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');
});

Its not fading in when I hover over the div, it just appears. Not sure what the issue it - please let me know!

Upvotes: 2

Views: 16488

Answers (3)

kapa
kapa

Reputation: 78701

The problem is, that when you append a div, it will already become visible. So you have to hide it beforehand. Check out my 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');
});

An alternative solution might be to add this to your stylesheet:

.cloud1 { display: none; }

So whenever something with the class of cloud1 is appended, it will be hidden by default, so fadeIn() will work as expected.

Appendix: you also might want to check if the div is already added, because otherwise whenever the mouseenter event happens, a new div will be appended.

Upvotes: 4

Richard Dalton
Richard Dalton

Reputation: 35793

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

Upvotes: 1

Dmytro Evseev
Dmytro Evseev

Reputation: 11581

Your element is already visible. Try this example

$("#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');
});

Upvotes: 5

Related Questions