Dlaczego jquery fadeIn() nie działa z .html()?

Po kliknięciu pola wyboru chcę, aby komunikat powoli pojawiał się.Dlaczego jquery fadeIn() nie działa z .html()?

Dlaczego w tym przykładzie nie działa funkcja .fadeIn()?

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

});

Źródło

2009-09-29 Edward Tanguay

198

Nie fadeIn jest wykonywana, ponieważ element #message jest widoczne, ukryć go, dodać zawartość i blaknięcie go:

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

Źródło

2009-09-29 04:33:52 CMS

Idealne, właśnie to, czego potrzebowałem. – Phil

Awesome. Jesteś bohaterem na dzisiaj. –

System zarządzania treścią w postaci człowieka - świetny! – JoseBazBaz

Nie mam pojęcia dlaczego, ale miałem problemy łańcuchowy to wcześniej. Można uzyskać żądany efekt za pomocą tego mniej eleganckie kod:

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

});

Źródło

2009-09-29 04:33:31 beggs

to czuje się jak kod voodoo, wiesz? Tak jak w przypadku łączenia, ale prawdopodobnie było coś, co przegapiłeś, gdy próbowałeś, więc powróciłeś do metody dodgier, ponieważ działa. To niebezpieczny zwyczaj wejść w ... – nickf

Zgódź się ... nigdy nie zastanawiałem się, dlaczego to nie zadziałało ... ale widzę, że odpowiedź CMS "wyjaśnia. Dobrze wiedzieć. – beggs

po analizujemy ten problem, że muszę rozwiązać, to jest mój kod, który działa w użyciu wyciszenia zmiany html i fadein

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

Źródło

2012-06-12 04:40:58 XMaster

Dlaczego jquery fadeIn() nie działa z .html()?

Odpowiedz

Powiązane problemy