爲什麼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

沒有淡入做是因爲#message元素可見，隱藏它，添加內容，並消除它：

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

來源

2009-09-29 04:33:52 CMS

完美，正是我所需要的。 – Phil 2011-02-21 18:25:22

太棒了。你是今天的英雄。 – 2012-11-16 00:59:06

人類形式的內容管理系統 - 真棒！ – JoseBazBaz 2012-12-31 01:10:48

不知道爲什麼，但我已經遇到了麻煩之前鏈接這一點。您可以使用此較少優雅的代碼得到你想要的效果：

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 2009-09-29 04:36:19

同意......從來沒有花時間弄清楚爲什麼它不工作...但我看到CMS的答案解釋它。很高興知道。 – beggs 2009-09-29 05:06:56

analize這個問題之後，我必須解決，這是我的代碼，該工程使用的淡出，改變HTML和淡入

$("#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（）一起工作？

回答

相關問題