¿Por qué no funciona jQuery fadein () con .html ()?
Pregunta
Cuando hace clic en una casilla de verificación, quiero que el mensaje se desvanezca lentamente.
¿Por qué no funciona .fadein () en este ejemplo?
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');
});
});
Solución
No se realiza Fadein porque el elemento #Message es visible, esconderlo, agregar el contenido y desviarlo en:
$('#message').hide().html("You clicked on a checkbox.").fadeIn('slow');
Otros consejos
Después de analizar este problema, que tengo que resolver, este es mi código, que funciona para usar Fadadout, cambiar HTML y FADEIN
$("#div_big_picture").fadeOut('slow',function(){
$(this).html("<img src='" + str_to_load + "' height='800px' />")
}).fadeIn("slow");
No tengo idea de por qué, pero he tenido problemas para encadenar esto antes. Puede obtener el efecto que desee usando este código menos elegante:
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');
});
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow