Why doesn't jquery fadeIn() work with .html()?

Question

When you click you a checkbox I want the message to fade in slowly.

Why doesn\'t .fadeIn() work in this example?

HTML:

Answer 1

after analize this problem, that I have to solve, this is my code, that works to use fadeout, change html and fadein

$("#div_big_picture").fadeOut('slow',function(){
    $(this).html("<img src='" + str_to_load + "' height='800px' />")
}).fadeIn("slow");

Answer 2

No idea why but I've had trouble chaining this before. You can get the effect you want by using this less elegant code:

google.load("jquery", "1.3.2");

//run when page is loaded
google.setOnLoadCallback(function() {

    $('.checkboxList .row').css('color','red');
    $('.checkboxList input').attr('checked', true);
    $('.checkboxList input').bind('click', function() {
        $('#message').hide(); //just in case
        $('#message').html("You clicked on a checkbox.");
        $('#message').fadeIn('slow');
    });

});

Answer 3

No fadeIn is done because the #message element is visible, hide it, add the content and fade it in:

$('#message').hide().html("You clicked on a checkbox.").fadeIn('slow');