Чому jquery fadeIn () не працює з .html ()?


77

Коли ви клацаєте прапорець, я хочу, щоб повідомлення повільно зникало.

Чому .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');
    });

});

Відповіді:


223

FadeIn не виконується, оскільки видно елемент #message, сховайте його, додайте вміст і згладьте:

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

Приголомшливо Ти - герой сьогодні.
James P.,

6
Система управління вмістом у вигляді людини - неймовірно!
JoseBazBaz

Що робити, якщо я додаю кілька liелементів через 1 секунду по одному і хочу показати своє рішення? Як просто згасати лі, який я додав не всі лі? Подобається $("#oFnav").append("<li class='hideOFl'>Business Process Study</li>").hide().fadeIn(fadeIndur);. Він приховує і зникає на всіх листах, а не просто додається.
Р.Н. Кушваха

Змінено: $('#message').fadeOut('slow').html("You clicked on a checkbox.").fadeIn('slow');дозволить зниклому в html моргати 2 рази ... кумедна помилка: P
Керім Ягмурку

9

після аналізу цієї проблеми, яку я маю вирішити, це мій код, який працює для використання fadeout, зміни html і fadein

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

2

Не знаю, чому, але раніше я мав проблеми з ланцюгом. Ви можете отримати бажаний ефект, використовуючи цей менш елегантний код:

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

});

2
це схоже на код вуду, розумієш? Мовляв, ланцюжок працює, але, ймовірно, було щось, про що ви пропустили, спробувавши, тож ви повернулися до методу хитрощі, оскільки він працює. Це небезпечна звичка
заходити

Погодьтеся ... ніколи не знайшов часу, щоб зрозуміти, чому це не спрацювало ... але я бачу, що відповідь CMS це пояснює. Добре знати.
благає
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.