Warum arbeitet JQuery fadein () nicht mit .html ()?
Frage
Wenn Sie auf ein Kontrollkästchen klicken, möchte ich, dass die Nachricht langsam verblasst.
Warum funktioniert .fadein () in diesem Beispiel nicht?
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');
});
});
Lösung
Kein Fadein wird fertig, weil das #Message -Element sichtbar ist, verbergen, den Inhalt hinzufügen und verblassen:
$('#message').hide().html("You clicked on a checkbox.").fadeIn('slow');
Andere Tipps
Nach Analyse dieses Problems, das ich lösen muss, ist dies mein Code, der Fadeout, ändern HTML und Fadein verwenden
$("#div_big_picture").fadeOut('slow',function(){
$(this).html("<img src='" + str_to_load + "' height='800px' />")
}).fadeIn("slow");
Keine Ahnung warum, aber ich hatte schon einmal Probleme, dies zu verkleiden. Sie können den gewünschten Effekt erhalten, indem Sie diesen weniger eleganten Code verwenden:
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');
});
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow