Почему jquery fadeIn() не работает с .html()?

Когда вы нажмете на свой флажок, я хочу, чтобы сообщение медленно исчезало.Почему jquery fadeIn() не работает с .html()?

Почему в этом примере не работает .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'); 
    }); 

});

источник

2009-09-29 Edward Tanguay

198

Нет FadeIn делается потому, что элемент #message видно, скрыть его, добавить содержимое и исчезать его:

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

источник

2009-09-29 04:33:52 CMS

Отлично, только то, что мне нужно. – Phil

Удивительный. Ты сегодня герой. –

Система управления контентом в виде человека - удивительный! – JoseBazBaz

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

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

});

источник

2009-09-29 04:33:31 beggs

это чувствует, как вуду код, вы знаете? Например, цепочка работает, но, возможно, вы что-то пропустили, когда вы ее попробовали, поэтому вы вернулись к методу доджера, потому что это работает. Это опасная привычка ... – nickf

Согласитесь ... никогда не занимал время, чтобы понять, почему это не сработало ... но я вижу, что ответ CMS объясняет это. Хорошо знать. – beggs

после Анализируй это проблема, что я должен решить, это мой код, который работает, чтобы использовать FadeOut, изменение HTML и FadeIn

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

источник

2012-06-12 04:40:58 XMaster

Почему jquery fadeIn() не работает с .html()?

ответ

Смежные вопросы