फीडिंग नवीनतम समाचार टिकर

Question

मैं नवीनतम समाचार टिकर बनाने का सबसे प्रभावी तरीका ढूंढ रहा हूं।

मैं एक ul जो li के किसी भी संख्या में पकड़ कर सकते हैं और सभी मैं की जरूरत है उन में से एक fading, एक समय में 5 सेकंड के लिए रखते हुए और फिर इसे बाहर fading, एक li लूप करने के लिए करने के लिए। सूची li 40px की ऊंचाई के साथ प्रदर्शित हो रही है और यह अच्छी तरह से प्रदर्शित करता है जिसमें 40px भी है जो overflow: hidden के साथ वांछित प्रभाव उत्पन्न करता है। li को जगह में रखने में सक्षम होने के लिए यदि कर्सर इसे प्रदर्शित करते समय इसके ऊपर हो जाता है तो इसे बनाने के लिए बहुत अच्छा होगा।

मुझे पता है कि jQuery टिकर प्लगइन है जिसका व्यापक रूप से उपयोग किया जाता है (पुरानी बीबीसी शैली है) लेकिन मैंने इसका उपयोग करने की कोशिश की है और मुझे जिस सादगी की आवश्यकता है, उसके लिए यह बहुत भारी लगता है और यह स्टाइल मैं उपयोग करता हूं ।

मैं इस अब तक का उपयोग कर:

function tickOut(){ 
     $('#ticker li:first').animate({'opacity':0}, 1000, function() { 
      $(this).appendTo($('#ticker')).css('opacity', 1); }); 

    } 

    setInterval(function(){ tickOut() }, 5500); 

लेकिन यह वास्तव में अगले li इतना प्रभाव में फीका नहीं करता है एक सा गन्दा है।

अगर कोई प्रभाव उत्पन्न करने में मदद के लिए कुछ विकल्प सुझा सकता है तो मुझे इतना उपयोगी होगा।

धन्यवाद

Answer 1

hide() और फोन fadein() बाद यह तत्व सूची में सबसे ऊपर हो जाता है।

function tickOut(){ 
     $('#ticker li:first').animate({'opacity':0}, 1000, function() { 
      $(this).appendTo($('#ticker')) 
      $('#ticker li:first').hide() 
      $('#ticker li:first').fadeIn(1000) 
       $('#ticker li:not(:first)').css('opacity', '1') 
     }); 
    } 

setInterval(function(){ tickOut() }, 5500); 

देखें:

http://codepen.io/anon/pen/lHdGb

Answer 2

मुझे लगता है कि जैसे यह कर woudl:

function tickOut(){ 
    $('#ticker li:first').animate({'opacity':0}, 1000, function() { 
      $(this).appendTo($('#ticker')).css('opacity', 1); }); 
    } 
var interval; 
$(function() { 
    interval = setInterval(function(){ tickOut() }, 5500); 
    $('#ticker').hover(function() { 
      if(interval) 
       clearInterval(interval); 
      $('#ticker li:first').stop(); 
      $('#ticker li:first').css('opacity', 1).stop(); 
     }, function(){ 
      interval = setInterval(function(){ tickOut() }, 5500); 
      }); 
}); 

$('#ticker').hover जो अंतराल को साफ करता है और एनिमेशन बंद हो और रिटर्न देखें opacity 1 जब माउस के अंदर UL मिला करने के लिए (ऐसा करने के लिए बदला जा सकता है जब LI के अंदर केवल कुछ विशेष तत्व अंडे है आर माउस) और इसे UL छोड़ने के बाद फिर से शुरू होता है। डेमो: http://jsfiddle.net/KFyzq/6/