2009-09-29 43 views
69

जब आप एक चेकबॉक्स पर क्लिक करते हैं तो मैं चाहता हूं कि संदेश धीरे-धीरे फीका हो।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> 

जावास्क्रिप्ट:

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

}); 

उत्तर

198

नहीं fadein किया जाता है इसे छिपाने, सामग्री जोड़ने और इसे फीका:: आप इस कम सुरुचिपूर्ण कोड का उपयोग करके प्रभाव आप चाहते हैं प्राप्त कर सकते हैं

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

बिल्कुल सही, बस मुझे जो चाहिए था। – Phil

+0

बहुत बढ़िया। आप आज के नायक हैं। –

+6

एक इंसान के रूप में एक सामग्री प्रबंधन प्रणाली - भयानक! – JoseBazBaz

2

कोई विचार क्यों, लेकिन मैं मुसीबत से पहले इस चेनिंग किया है। क्योंकि #message तत्व दिखाई दे रहा है

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

इस वूडू कोड की तरह लगता है fadein उपयोग करने के लिए काम करता है, आप जानते हैं? जैसे, चेनिंग काम करता है, लेकिन संभवतः ऐसा कुछ था जिसे आपने याद किया था जब आप इसे आजमाते थे, इसलिए आप डोडगीर विधि पर वापस आ गए हैं क्योंकि यह काम करता है। यह एक खतरनाक आदत है ... – nickf

+0

सहमत हैं ... यह समझने में समय नहीं लगा कि यह क्यों काम नहीं करता ... लेकिन मुझे लगता है कि सीएमएस के जवाब ने इसे समझाया। जानकार अच्छा लगा। – beggs

8

analize इस समस्या के बाद, मैं हल करने के लिए है कि, यह मेरा कोड, कि fadeout, परिवर्तन एचटीएमएल और

$("#div_big_picture").fadeOut('slow',function(){ 
    $(this).html("<img src='" + str_to_load + "' height='800px' />") 
}).fadeIn("slow"); 
संबंधित मुद्दे