टेक्स्ट लूप में फीका और बाहर - jQuery

मेरे पास H2 टैग में लिपटे दो उद्धरण हैं जिन्हें मैं jQuery का उपयोग करके अंदर और बाहर फीका करना चाहता हूं। जब पृष्ठ लोड होता है तो मैं चाहता हूं कि पहला उद्धरण फीका जाए, कुछ सेकंड के लिए देरी हो और फिर आगे बढ़ने के लिए अगला उद्धरण। मैं इसे दो उद्धरणों के माध्यम से लूप जारी रखना चाहता हूं। किसी भी तरह की सहायता का स्वागत किया जाएगा।टेक्स्ट लूप में फीका और बाहर - jQuery

स्रोत

2012-08-22 Tyler Almond

आप इस तरह यह कर सकता है:

सीएसएस:

.quotes {display: none;}

HTML:

<h2 class="quotes">first quote</h2> 
<h2 class="quotes">second quote</h2>

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

// code gets installed at the end of the body (after all other HTML) 
(function() { 

    var quotes = $(".quotes"); 
    var quoteIndex = -1; 

    function showNextQuote() { 
     ++quoteIndex; 
     quotes.eq(quoteIndex % quotes.length) 
      .fadeIn(2000) 
      .delay(2000) 
      .fadeOut(2000, showNextQuote); 
    } 

    showNextQuote(); 

})();

कार्य डेमो: http://jsfiddle.net/jfriend00/n4mKw/

यह कोड आपके पास मौजूद कोट्स के लिए काम करेगा, केवल दो ही नहीं। यदि आपके पास उद्धरण के बाद सामग्री है, तो संभवत: आप कंटेनर के आकार को ठीक करना चाहते हैं, ताकि उद्धरण इस प्रकार हो जाएं कि जब आप एक कोट से अगले तक जाते हैं तो आकार बदल नहीं जाता है (अन्य पृष्ठ सामग्री को चारों ओर कूदने के कारण) ।

स्रोत

2012-08-22 01:45:43 jfriend00

जब मैं स्क्रिप्ट जोड़ता हूं तो मेरा पृष्ठ खाली लोड हो रहा है। मेरे पास उस पृष्ठ पर अन्य आइटमों का समूह है जो लोड नहीं हो रहा है। –

@ टायलर आलमंड - मुझे उस प्रश्न के साथ आपकी मदद कैसे करनी चाहिए जब मैं नहीं देख पा रहा हूं कि आपने क्या किया है? जाहिर है, आपके पास कुछ प्रकार की स्क्रिप्ट या HTML त्रुटि है। या तो आपने जो किया है उसके लिए एक लिंक पोस्ट करें या त्रुटि कंसोल में देखें कि आपके पास कौन सी त्रुटियां हैं ताकि आप उन्हें ठीक कर सकें। अवधारणा ठीक से निष्पादित होने पर काम करती है। एफवाईआई, उपरोक्त स्क्रिप्ट पृष्ठ के '' अनुभाग के अंत में '

यह उपर्युक्त स्क्रिप्ट काम करने के लिए आपको यही चाहिए।

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

तब मुख्य: सबसे पहले आप संदर्भ apropriate JQuery फ्रेमवर्क, तो या तो <head> अनुभाग में, या <body> टैग के अंत में, अन्य सभी तत्वों के बाद इस स्क्रिप्ट टैग जोड़ने की आवश्यकता जावास्क्रिप्ट को उपरोक्त <script> टैग के बाद लोड किया जाना चाहिए:

<script type="text/javascript"> 
(function() { 

    var quotes = $(".quotes"); 
    var quoteIndex = -1; 

    function showNextQuote() { 
     ++quoteIndex; 
     quotes.eq(quoteIndex % quotes.length) 
      .fadeIn(2000) 
      .delay(2000) 
      .fadeOut(2000, showNextQuote); 
    } 

    showNextQuote(); 

})(); 
</script>

स्रोत

2013-10-30 09:10:09 Kudzai

संबंधित मुद्दे

टेक्स्ट लूप में फीका और बाहर - jQuery

उत्तर

संबंधित मुद्दे