问题
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\');
});
});
回答1:
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');
回答2:
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");
回答3:
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');
});
});
来源：https://stackoverflow.com/questions/1490563/why-doesnt-jquery-fadein-work-with-html