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

Question

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!

Solution 1

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');
});

Solution 2

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.

Solution 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 Example