jquery - How can I make my elements fade in and out as their display attributes are changed in Javascript? -

एक बटन क्लिक करें (onclick का उपयोग करके), मैं none <के बीच तीन divs की डिस्प्ले शैली टॉगल कर रहा हूँ < / कोड> और ब्लॉक पर क्लिक करें। मैं एक नुकसान में हूँ कि मैं इन डिवीसों को कैसे और बाहर निकाल सकता हूं। मैं भी JQuery का उपयोग करने के लिए खुले हूँ, लेकिन मुझे नहीं लगता कि मैं कैसे एकीकृत कर सकता हूं और या fadeIn () और fadeOut () फ़ंक्शन का उपयोग करें कोई भी सुझाव है कि मैं ऐसा करने के बारे में कैसे जा सकता हूं, इसकी सराहना की जाएगी।

नीचे दिए गए फ़ंक्शन को संदर्भ के लिए onclick कहा जा रहा है, यह वह जगह है जहां मेरे डिव्स का डिस्प्ले एट्रिब्यूट टॉगल किया गया है।

  function divSelector (गणना) {यदि (गणना == 1) {var temp = document.getElementById ('दूसरे के बारे में-पाठ'); Temp.style.display = 'none'; Temp = document.getElementById ('तीसरे-के-पाठ'); Temp.style.display = 'none'; Temp = document.getElementById ('प्रथम-के-पाठ'); Temp.style.display = 'block'; } और अगर (गणना == 2) {var temp = document.getElementById ('प्रथम-के-पाठ'); Temp.style.display = 'none'; Temp = document.getElementById ('तीसरे-के-पाठ'); Temp.style.display = 'none'; Temp = document.getElementById ('दूसरे के बारे में-पाठ'); Temp.style.display = 'block'; } और अगर (गणना == 3) {var temp = document.getElementById ('प्रथम-के-पाठ'); Temp.style.display = 'none'; Temp = document.getElementById ('दूसरे के बारे में-पाठ'); Temp.style.display = 'none'; Temp = document.getElementById ('तीसरे-के-पाठ'); Temp.style.display = 'block'; } और {console.log ("गणना कुछ नहीं है।"); }}    
 
 
 यहां आपके लिए एक पूरी तरह से निहित उदाहरण है:  
  
  & lt; html & gt; & Lt; शीर्ष & gt; & Lt; script src = "// ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> & LT; शैली & gt; .btn {ऊंचाई: 50px; चौड़ाई: 50px; मार्जिन: 50px 50px;}। एक {पृष्ठभूमि-रंग: लाल;}। दो {पृष्ठभूमि रंग: हरा;}। तीन {पृष्ठभूमि रंग: नीला;} & lt; / शैली & gt; & Lt; स्क्रिप्ट प्रकार = "टेक्स्ट / जावास्क्रिप्ट" & gt; $ (Document) .ready (function () {count = 1; $ ('# mybutt')। क्लिक करें (फ़ंक्शन () {divSelector (count); count ++; यदि (count == 4) count = 1;}); फ़ंक्शन divSelector (गणना) {if (count == 1) {$ ('# first-about-text')। FadeIn (1000); $ ('# second-about-text')। Hide (); $ (' $ ('# सेकंड-के-टेक्स्ट')। फेडऑट (1000) ;;} और यदि (गणना == 2) {$ ('# पहले-के-पाठ')। फेडऑट (1000); $ ('# सेकंड-के- पाठ ')। फीडइन (1000); $ (' # तिहाई-के-पाठ ')। छुपाएं () ;;} और अगर (गणना == 3) {$ (' # पहले-के-पाठ ')। ); $ ('# सेकंड-के-टेक्स्ट')। फीडऑट (1000); $ ('# तीसरा-के-पाठ')। फीडइन (1000) ;;} {console.log ("गणना कुछ नहीं है।" );}}}); // END $ (दस्तावेज़) .ready () & lt; / script & gt; & Lt; / head & gt; & LT; बॉडी & gt; & Lt; div id = "प्रथम-के-पाठ" वर्ग = "बीटीएन एक" & gt; & lt; / div & gt; & Lt; div id = "दूसरे के बारे में-पाठ" वर्ग = "बीटीएन दो" & gt; & lt; / div & gt; & Lt; div id = "तीसरे-के-पाठ" वर्ग = "बीटीएन तीन" & gt; & lt; / div & gt; & Lt; इनपुट प्रकार = "बटन" id = "mybutt" value = "मुझे क्लिक करें" & gt; & Lt; / body & gt; & Lt; / html & gt;