jQuery के साथ addClass / removeClass को एनिमेट करना

Question

मैं jQuery और jQuery-ui का उपयोग कर रहा हूं और विभिन्न वस्तुओं पर विभिन्न विशेषताओं को एनिमेट करना चाहता हूं।

यहाँ इस मुद्दे को समझाने के लिए मैंने इसे एक div में सरलीकृत किया है जो उपयोगकर्ता के ऊपर होने पर नीले से लाल रंग में बदल जाता है।

मैं उपयोग करते समय मनचाहा व्यवहार प्राप्त करने में सक्षम हूं animate(), हालांकि ऐसा करते समय जिन शैलियों को मैं एनिमेट कर रहा हूं उन्हें एनीमेशन कोड में होना चाहिए और इसलिए मैं अपनी स्टाइल शीट से अलग हूं। ( उदाहरण 1 देखें )

एक विकल्प का उपयोग कर रहा है addClass()और removeClass()मैं उस सटीक व्यवहार को फिर से बनाने में सक्षम नहीं हूं जो मुझे मिल सकता है animate()। ( उदाहरण 2 देखें )

---

उदाहरण 1

आइए अपने साथ लगे कोड पर एक नज़र डालें animate():

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( {backgroundColor:'blue'}, {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( {backgroundColor:'red'}, {duration:500});
  });

यह मेरे द्वारा देखे जा रहे सभी व्यवहारों को प्रदर्शित करता है:

1. लाल और नीले रंग के बीच आसानी से एनिमेट करता है।
2. उपयोगकर्ता द्वारा अपने माउस को जल्दी से और अंदर से बाहर ले जाने पर कोई एनीमेशन 'ओवरक्यू-आईएनजी' नहीं।
3. यदि उपयोगकर्ता अपने माउस को बाहर ले जाता है / जबकि एनीमेशन अभी भी खेल रहा है, तो यह वर्तमान 'आधी' स्थिति और नए 'लक्ष्य' राज्य के बीच सही ढंग से ढल जाता है।

लेकिन चूंकि शैली में परिवर्तन परिभाषित किए गए हैं, इसलिए animate()मुझे वहां के शैली मूल्यों को बदलना होगा, और यह सिर्फ मेरी स्टाइलशीट को इंगित नहीं कर सकता है। यह 'विखंडन' जहाँ शैलियों को परिभाषित किया जाता है, वह कुछ ऐसा है जो मुझे परेशान करता है।

---

उदाहरण 2

यहां मेरा वर्तमान सर्वश्रेष्ठ प्रयास है addClass()और removeClass(नोट करें कि एनीमेशन के लिए आपको jQuery-ui की आवश्यकता है)

//assume classes 'red' and 'blue' are defined

$('#someDiv')
  .addClass('blue')
  .mouseover(function(){
    $(this).stop(true,false).removeAttr('style').addClass('red', {duration:500});
  })
  .mouseout(function(){
    $(this).stop(true,false).removeAttr('style').removeClass('red', {duration:500});
  });

यह मेरी मूल आवश्यकताओं की संपत्ति 1. और 2. दोनों को प्रदर्शित करता है, हालांकि 3 काम नहीं करता है।

मैं इसका कारण समझता हूं:

जब एनिमेटिंग addClass()और removeClass()jQuery तत्व में एक अस्थायी शैली जोड़ता है, और तब उपयुक्त मानों को बढ़ाता है जब तक कि वे प्रदान किए गए वर्ग के मूल्यों तक नहीं पहुंचते हैं, और केवल तब यह वास्तव में वर्ग को जोड़ता / हटाता है।

इसकी वजह से मुझे शैली की विशेषता को हटाना पड़ता है, अन्यथा यदि एनीमेशन को रोक दिया जाता है तो शैली की विशेषता आधी रह जाएगी और स्थायी रूप से किसी भी वर्ग मान को अधिलेखित कर देगी, क्योंकि एक टैग में शैली की विशेषताओं का वर्ग शैलियों की तुलना में अधिक महत्व है।

हालाँकि, जब एनीमेशन आधा हो जाता है, तब तक इसमें नया वर्ग नहीं जोड़ा जाता है, और इसलिए इस समाधान के साथ रंग पिछले रंग में कूद जाता है जब उपयोगकर्ता एनीमेशन पूरा होने से पहले अपने माउस को हिलाता है।

---

जो मैं आदर्श रूप से करना चाहता हूं वह कुछ ऐसा करने में सक्षम है:

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( getClassContent('blue'), {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( getClassContent('red'), {duration:500});
  });

जहां getClassContentप्रदान की गई कक्षा की सामग्री वापस आएगी। मुख्य बात यह है कि इस तरह से मुझे अपनी शैली की परिभाषाएँ पूरी जगह पर नहीं रखनी हैं, लेकिन मैं अपनी स्टाइलशीट में उन्हें कक्षाओं में रख सकता हूँ।

Comments

IE के किन संस्करणों का आपको समर्थन करने की आवश्यकता है? क्या आप IE9 से खुश होंगे? या क्या आपको कम समर्थन की आवश्यकता है?

— 15:16 बजे tw16

मैं IE के बारे में बिल्कुल ईमानदार होने की परवाह नहीं कर रहा हूं। यह सब केवल वेबकिट ब्राउज़र (सफारी / क्रोम) के साथ परीक्षण किया गया है।

— जोहान्स

कैसा getClassContentलग रहा है?

— sreginogemoh

Answer 1

चूंकि आप IE के बारे में चिंतित नहीं हैं, इसलिए कक्षाओं को बदलने के लिए एनीमेशन और jQuery प्रदान करने के लिए बस सीएसएस संक्रमण का उपयोग क्यों न करें। लाइव उदाहरण: http://jsfiddle.net/tw16/JfK6N/

#someDiv{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

Comments

2015-06-12 तक यह समर्थित है - IE 10+ - Chrome 26+ - FireFox 16+ - Safari 6.1+ - Opera 12.1+ -webkit, -moz; -o केवल पुराने ब्राउज़रों के लिए भी आवश्यक है। आप शायद कुछ जगह बचाने के लिए इसे छोड़ सकते हैं।

— CLST

@ क्लस्ट, मैं पुराने ब्राउज़रों के साथ अंतरिक्ष की कुछ बाइट्स को बचाने के लिए पीछे की ओर अनुकूलता पसंद करूंगा।

— अरमान एच

Answer 2

एक अन्य समाधान (लेकिन इसमें jQuery की आवश्यकता है जैसा कि रिचर्ड नील इलगन ने टिप्पणियों में बताया है): -

addClass, removeClass और toggleClass भी एक दूसरे तर्क को स्वीकार करता है; एक राज्य से दूसरे राज्य में जाने की समयावधि।

$(this).addClass('abc',1000);

Jsfiddle देखें: - http://jsfiddle.net/6hvZT/1/

Comments

ध्यान दें कि इसके लिए jQuery UI की आवश्यकता है। बॉक्स से बाहर jQuery के xxxClass()कार्यों के लिए एनीमेशन का समर्थन नहीं करता है ।

— रिचर्ड नील इलगन

@ रिचर्ड नील इलगन: सूचित करने के लिए धन्यवाद। मैं वास्तव में उस बिंदु से चूक गया।

— उमर तारिक

क्या आप यह बता सकते हैं कि किस फ़ाइल को डाउनलोड करना है और .html फ़ाइल में शामिल करना है ताकि मैं केवल xxxClassइस तरह से एनीमेशन के लिए jQueryUI का उपयोग कर सकूं ?

— सोडियमनेट्रेट्रेट

[jqueryui.com] (jqueryui.com) @sodiumnitrate

— joe_young

यह समाधान भी स्लाइड () या चेतन () की तरह ही चेतन नहीं करता है। मिलीसेकंड मान एक देरी है, जो एक एनीमेशन नहीं है।

— सोलोना आर्मस्ट्रांग

Answer 3

आप switchClassएक उदाहरण के जेकरी यूई का उपयोग कर सकते हैं :

$( "selector" ).switchClass( "oldClass", "newClass", 1000, "easeInOutQuad" );

या यह jsfiddle देखें ।

Comments

-1। आप मूल पोस्ट में सूचीबद्ध 1, 2 और 3 प्रतिबंधों को पूरा नहीं करते थे। विशेष रूप से स्विचक्लास आवश्यकताओं 2 और 3 को खराब तरीके से संभालता है।

— जोहान्स

Answer 4

आपको केवल जोड़ने की अवधि को सक्षम करने के लिए jQuery यूआई प्रभाव-कोर (13KB) की आवश्यकता है, (जैसे कि उमर तारिक ने बताया)

Answer 5

मैं इस पर गौर कर रहा था लेकिन अंदर और बाहर के लिए एक अलग संक्रमण दर चाहता था।

यह वही है जो मैंने किया:

//css
.addedClass {
    background: #5eb4fc;
}

// js
function setParentTransition(id, prop, delay, style, callback) {
    $(id).css({'-webkit-transition' : prop + ' ' + delay + ' ' + style});
    $(id).css({'-moz-transition' : prop + ' ' + delay + ' ' + style});
    $(id).css({'-o-transition' : prop + ' ' + delay + ' ' + style});
    $(id).css({'transition' : prop + ' ' + delay + ' ' + style});
    callback();
}
setParentTransition(id, 'background', '0s', 'ease', function() {
    $('#elementID').addClass('addedClass');
});

setTimeout(function() {
    setParentTransition(id, 'background', '2s', 'ease', function() {
        $('#elementID').removeClass('addedClass');
    });
});

यह तुरंत पृष्ठभूमि रंग को # 5eb4fc में बदल देता है और फिर धीरे-धीरे 2 सेकंड में वापस सामान्य हो जाता है।

यहाँ एक बेला है

Answer 6

हालाँकि, प्रश्न काफी पुराना है, मैं जानकारी जोड़ रहा हूँ अन्य उत्तरों में मौजूद नहीं है।

घटना के पूरा होते ही ओपी वर्तमान एनीमेशन को रोकने के लिए स्टॉप () का उपयोग कर रहा है। हालांकि, फ़ंक्शन के साथ मापदंडों के सही मिश्रण का उपयोग करने में मदद करनी चाहिए। जैसे। स्टॉप (सत्य, सत्य) या स्टॉप (सत्य, असत्य) क्योंकि यह कतारबद्ध एनिमेशन को अच्छी तरह से प्रभावित करता है।

निम्न लिंक एक डेमो दिखाता है जो स्टॉप () के साथ उपलब्ध विभिन्न मापदंडों को दिखाता है और वे कैसे खत्म () से अलग हैं।

http://api.jquery.com/finish/

हालाँकि, ओपी के पास JqueryUI का उपयोग करने में कोई समस्या नहीं थी, यह अन्य उपयोगकर्ताओं के लिए है जो समान परिदृश्यों में आ सकते हैं लेकिन JqueryUI / IE7 और 8 को भी समर्थन करने की आवश्यकता नहीं कर सकते।