jQuery जीआईएफ एनिमेशन

Question

मैं एक साधारण सरल एनीमेशन बनाने के लिए जीआईएफ का उपयोग करने की आवश्यकता को हटाने के लिए jQuery का उपयोग करना चाहता हूं।

मुझे जो चाहिए वह चार चरणों के लिए एक छवि है। 1) कुछ भी नहीं दिखा 2) छवि 3) छवि 4) छवि का तीसरा भाग का दूसरा हिस्सा के पहले भाग - शुरू

से अधिक मैं सोच रहा था मैं छवि चरणों बनाने की आवश्यकता होगी फिर एनीमेशन बनाने के लिए jQuery के साथ 'वर्तमान छवि को अगली' तकनीक के साथ बदलें 'का उपयोग करें। कॉलबैक के साथ यह बहुत आसान हो सकता है।

अगला भाग यह एनीमेशन पिछले एनीमेशन लोड होने के बाद कई स्थानों पर दिखाई देना है। एक बार फिर, कॉलबैक के साथ आसान हो सकता है।

मैं इस पर कुछ विचारों के बाद था। क्या यह मूर्ख है कि जीआईएफ का उपयोग न करें? या यह jQuery के साथ किया जा सकता है?

Answer 1

पहले तुम तो फिर तुम जो चित्र का हिस्सा डाल कई div की पृष्ठभूमि का उपयोग कर सकते हैं की जरूरत है

css_background-position

div दिखाने के लिए के रूप में आप एनीमेशन के प्रकार आप की जरूरत पर निर्भर करता है प्रदर्शित करने के लिए की जरूरत है ।

Answer 2

एनिमेटेड जीआईएफ का उपयोग करें - यही वह है जो उन्हें बनाया जाता है। मुझे यकीन है कि JQuery का उपयोग करके समाधान को एक साथ जोड़ना संभव है, लेकिन आप अतिरिक्त विकास समय और जटिलता में लागत का भुगतान करेंगे।

इसके अतिरिक्त, आपको यह समझना चाहिए कि एक अनुकूलित JQuery/CSS समाधान के साथ जाकर, आप अपने एनीमेशन को उस पेज पर कसकर जोड़ने का निर्णय ले रहे हैं। क्या होगा अगर कोई एक अलग पृष्ठ पर एनीमेशन शामिल करना चाहता है? उन्हें एक सिंगल जीआईएफ फ़ाइल के बजाय कोड के गुच्छा पर प्रतिलिपि बनाना होगा। क्या होगा यदि कोई इसे ईमेल या पावर-पॉइंट प्रस्तुति में शामिल करना चाहता है? नहीं किया जा सकता ...

Answer 3

यदि यह स्थिर और घटना संचालित नहीं होने वाला है, तो मैं gifs का उपयोग करने की अनुशंसा करता हूं।

यदि, हालांकि, एनीमेशन पृष्ठ पर होने वाली किसी चीज़ के जवाब में है, या यदि आप केवल सबकुछ लोड होने के बाद इसे शुरू करना चाहते हैं, तो jquery शायद जाने का तरीका है।

छवि को बदलने के लिए आपको छवि स्रोत (या यदि आप एक छवि का उपयोग कर रहे हैं तो स्थिति ऑफसेट) को बदलने में सक्षम होना चाहिए। छवियों के बीच परिवर्तन में देरी करने के लिए jQuery में some "pause" options पर एक नज़र डालें।

Untested उदाहरण (ऊपर के लिंक में साइमन के जवाब से प्राप्त): और उसके ट्यूटोरियल के लिए this jQuery के साथ पृष्ठभूमि एनीमेशन के लिए

function chg1() { $('#myimage').attr('src', ''); } 
function chg2() { $('#myimage').attr('src', 'image1src.jpg'); } 
function chg3() { $('#myimage').attr('src', 'image2src.jpg'); } 
function chg4() { $('#myimage').attr('src', 'image3src.jpg'); } 

function StartAnimation() { 
    setTimeout(chg1, 2000); // blank after 2 seconds 
    setTimeout(chg2, 4000); // img 1 after 4 seconds 
    setTimeout(chg3, 6000); // img 2 after 6 seconds 
    setTimeout(chg4, 8000); // img 3 after 8 seconds 
    setTimeout(StartAnimation, 8000); // start again after 8 seconds 
} 

StartAnimation(); // start it off 

Answer 4

चेक this page for a demo।

सीनान।

Answer 5

यह एक स्प्राइट में अपने चार छवियों गठबंधन करने के लिए संभव है (सभी चार छवियों के साथ 1 वास्तविक ग्राफिक शामिल & गैर-अतिव्यापी)? एक प्रदर्शन दृष्टिकोण से, ग्राहक के ब्राउज़र को केवल आपकी प्रत्येक चार छवियों के लिए 4 अनुरोध करने के चरण में एक ही छवि डाउनलोड करना पड़ता है।

एनीमेशन बनाना एक "टाइल" के आकार के तकनीक Damovisa से ऊपर सुझाए गए तत्व के आकार का उपयोग करते हुए, केवल कुछ ब्लॉक तत्व का उपयोग कर रहा है, एक पृष्ठभूमि के रूप में इस एकल छवि स्थापित करने और स्थापित करने के रूप में सरल किया जाएगा एकल छवि का, और पृष्ठभूमि-स्थिति सीएसएस संपत्ति को बदलना। मुझे इस बारे में पूरी तरह से यकीन नहीं है (अगर मैं गलत हूं तो कृपया मुझे सही करें), लेकिन यह वास्तव में चार अलग-अलग छवियों को बदलने के बजाए पृष्ठभूमि छवि को स्थानांतरित करने के लिए एक कम महंगी ऑपरेशन की तरह लगता है।

जहां तक ​​पोर्टेबिलिटी और पुन: प्रयोज्यता है, आप बस कई जगहों पर इसका उपयोग करने में सक्षम होने के लिए एक jQuery प्लगइन बना सकते हैं।

Answer 6

यह बहुत आसान है और चेन की क्षमता रखता है:

JQuery:

$(document).ready(function(){ 
    //rotator - delay, children 
    $('#slideshow').rotator(50, 'img'); 
}); 

मार्कअप:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> 
<script type="text/javascript" src="scripts/jquery.rotator.js"></script> 

<style type="text/css"> 
#slideshow { 
    position:absolute; //or whatever you need 
    display:block; 
    top:0px; 
    left:0px; 
} 
#slideshow img { 
    position:absolute; 
    opacity:0; 
} 
</style> 

<!-- SLIDESHOW --> 
<div id="slideshow"> 
    <img src="images/1.png"> 
    <img src="images/2.png"> 
    <img src="images/3.png"> 
</div> 

प्लगइन:

(function($){ 
    $.fn.rotator = function(delay, child){ 
     //set curImage val 
     var currImg = 0; 
     var currIt = true; 
     //set array of images 
     var ss = $('#slideshow').children(child); 
     var ssize = ss.size(); 
     setInterval(function() { 
      if(currIt){ 
       $(ss[currImg]).css('opacity','1'); 
       currIt = !currIt; 
      }else if (!currIt){ 
       $(ss[currImg]).css('opacity','0'); 
       $(ss[currImg+1]).css('opacity','1'); 
       currIt = !currIt; 
       currImg++; 
      } 
      //reset 
      if(currImg >= ssize){ 
       currImg = 0; 
       $(ss[currImg]).css('opacity','1'); 
      } 
     }, delay); 
     return this; 
    }; 
})(jQuery);