Why doesn't jquery fadeIn() work with .html()?
fadein, jquery
Solution
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');
Problem
When you click you a checkbox I want the message to fade in slowly. Why doesn't .fadeIn() work in this example? HTML: ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>Text XHTML Page</title> <link href="css/main.css" rel="stylesheet" type="text/css" media="all"/> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="javascript/main.js"></script> </head> <body> <div class="checkboxList"> <div class="title">Languages:</div> <div class="row"><input class="checkbox" type="checkbox"/><span class="label">Ruby</span></div> <div class="row"><input type="checkbox"/><span class="label">PHP</span></div> <div class="row"><input type="checkbox"/><span class="label">C#</span></div> <div class="row"><input type="checkbox"/><span class="label">Python</span></div> <div class="row"><input type="checkbox"/><span class="label">JavaScript</span></div> </div> <p id="message"></p> </body> </html> ``` javascript: ``` 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').html("You clicked on a checkbox.").fadeIn('slow'); }); }); ```