Warum funktioniert jquery fadeIn () nicht mit .html ()?

77

Wenn Sie auf ein Kontrollkästchen klicken, soll die Nachricht langsam eingeblendet werden.

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

});
jquery fadein Edward Tanguay
quelle

Antworten:

222

Es wird kein Einblenden durchgeführt, da das Element #message sichtbar ist. Blenden Sie es aus, fügen Sie den Inhalt hinzu und blenden Sie es ein:

$('#message').hide().html("You clicked on a checkbox.").fadeIn('slow');
Christian C. Salvadó
quelle
Genial. Du bist der Held für heute.
James P.
6
Ein Content Management System in Form eines Menschen - großartig!
JoseBazBaz
Was ist, wenn ich linach 1 Sekunde mehrere Elemente nacheinander hinzufüge und mit Ihrer Lösung zeigen möchte? Wie kann ich nur das Li einblenden, das ich nicht allen Li hinzugefügt habe? Wie $("#oFnav").append("<li class='hideOFl'>Business Process Study</li>").hide().fadeIn(fadeIndur);. Es versteckt und verblasst alles, was nicht nur hinzugefügt wurde.
RN Kushwaha
Geändert: $('#message').fadeOut('slow').html("You clicked on a checkbox.").fadeIn('slow');lässt das in HTML eingeblendete 2 mal blinken ... lustiger Fehler: P
Kerim Yagmurcu
9

Nachdem ich dieses Problem analysiert habe, das ich lösen muss, ist dies mein Code, der Fadeout verwendet, HTML ändert und Fadein

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

Keine Ahnung warum, aber ich hatte vorher Probleme, dies zu verketten. Mit diesem weniger eleganten Code können Sie den gewünschten Effekt erzielen:

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

});
bettelt
quelle
2
Das fühlt sich an wie Voodoo-Code, weißt du? Wie die Verkettung funktioniert, aber es gab wahrscheinlich etwas, das Sie verpasst haben, als Sie es ausprobiert haben, also sind Sie zur zwielichtigeren Methode zurückgekehrt, weil es funktioniert. Es ist eine gefährliche Angewohnheit, sich darauf
einzulassen
Ich stimme zu ... habe mir nie die Zeit genommen, um herauszufinden, warum es nicht funktioniert hat ... aber ich sehe, dass die Antwort von CMS es erklärt. Gut zu wissen.
bettelt