¿Por qué jquery fadeIn() no funciona con .html()?

Cuando hace clic en una casilla de verificación, deseo que el mensaje se desvanezca lentamente.¿Por qué jquery fadeIn() no funciona con .html()?

¿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'); 
    }); 

});

Fuente

2009-09-29 Edward Tanguay

198

Sin fadeIn se hace porque el elemento #message es visible, ocultar, añadir el contenido y se desvanecen en:

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

Fuente

2009-09-29 04:33:52 CMS

Perfecto, justo lo que necesitaba. – Phil

Impresionante. Eres el héroe de hoy. –

Un sistema de gestión de contenidos en forma de ser humano, ¡increíble! – JoseBazBaz

Ni idea de por qué, pero he tenido problemas para encadenar esto antes. Usted puede obtener el efecto deseado mediante el uso de 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'); 
    }); 

});

Fuente

2009-09-29 04:33:31 beggs

esto se siente como código de vudú, ¿sabes? Al igual, el encadenamiento funciona, pero probablemente haya algo que te perdiste cuando lo probaste, así que has vuelto al método de dodgier porque funciona. Es un hábito peligroso entrar en ... – nickf

De acuerdo ... nunca me tomé el tiempo para descubrir por qué no funcionó ... pero veo que la respuesta de CMS lo explica. Bueno saber. – beggs

después analize este problema, que tengo que resolver, este es mi código, que funciona a utilizar desvanecimiento, el cambio html y fadein

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

Fuente

2012-06-12 04:40:58 XMaster

¿Por qué jquery fadeIn() no funciona con .html()?

Respuesta

Cuestiones relacionadas