jQuery: क्या मैं AddClass () और इस तरह के बीच देरी () को कॉल कर सकता हूं?

Question

कुछ सरल के रूप में:

$("#div").addClass("error").delay(1000).removeClass("error");

काम करने के लिए प्रतीत नहीं होता है। सबसे आसान विकल्प क्या होगा?

Comments

बिल्कुल वैसा ही करना चाहता था। यह कॉल करने के लिए अच्छा होगा$("#div").addClassTemporarily("error",1000)

— सेबस्टियन लॉबर

Answer 1

आप अपने वर्ग को हटाने के लिए एक नया कतार आइटम बना सकते हैं:

$("#div").addClass("error").delay(1000).queue(function(next){
    $(this).removeClass("error");
    next();
});

या dequeue विधि का उपयोग कर :

$("#div").addClass("error").delay(1000).queue(function(){
    $(this).removeClass("error").dequeue();
});

कारण कि आपको कॉल करने की आवश्यकता है nextया dequeuejQuery को बताएं कि आप इस पंक्तिबद्ध आइटम के साथ कर रहे हैं और इसे अगले एक पर जाना चाहिए।

Comments

मुझे यह विकल्प पसंद है क्योंकि कतारबद्ध फ़ंक्शन में उपयोग किए जाने वाले jquery ऑब्जेक्ट Thats के संदर्भ को पास करना आसान बनाता है, इसलिए इसका उपयोग अधिक सामान्य संदर्भ (हार्ड कोड किए गए नामों के बिना) में किया जा सकता है।

— ग्रैंडमास्टरबी

हमें "अगला" क्यों चाहिए? क्या हम $ ("# div") कर सकते हैं। AddClass ("त्रुटि")। विलंब (1000) .queue (फ़ंक्शन () {$ (यह) .removeClass ("त्रुटि");}); अधिक सुरुचिपूर्ण लगता है?

— वेनसोह

@Vennsoh आपको एक 'अगली' पंक्ति वस्तु पास करने की आवश्यकता नहीं है। आप इसके बजाय

— dequeue

Answer 2

AFAIK देरी विधि केवल संख्यात्मक सीएसएस संशोधनों के लिए काम करती है।

अन्य उद्देश्यों के लिए जावास्क्रिप्ट एक setTimeout विधि के साथ आता है:

window.setTimeout(function(){$("#div").removeClass("error");}, 1000);

Comments

+1: Jquery के लिए Jquery का उपयोग न करें। कई समस्याओं के सरल जावास्क्रिप्ट समाधान हैं।

— जोएल

+1: पहली टिप्पणी के समान ही। सिंपल JS कुछ समय के लिए ठीक काम करता है।

— wowpatrick

+1 सादगी के लिए, लेकिन साथ ही + 1'द स्वीकार किए गए उत्तर - जैसा कि मुझे बताया गया है कि .queue () वास्तव में निरंतरता ऑब्जेक्ट को पारित करता है जिसे मैन्युअल रूप से ('अगला ()') कहा जाना चाहिए। मैंने यह सोचकर आधे घंटे बिताए हैं कि मेरी पैरामीटरहीन कॉलबैक की श्रृंखला केवल पहले एक को क्यों निष्पादित करती है - अन्य साइटों पर कई उदाहरण श्रृंखला में एक देरी और एक पैरामीटर रहित कॉलबैक का उपयोग करते हैं, जो उस तंत्र का एक बड़ा भ्रामक

— ओवरसिलेशन है

बस एक पेडेंट नोट: सेटटाइमआउट ब्राउज़र की विंडो ऑब्जेक्ट (BOM) से आता है। जावास्क्रिप्ट (ECMA स्क्रिप्ट के रूप में समझा गया) में वह तरीका नहीं है।

— corbacho

Answer 3

मुझे पता है कि यह एक बहुत पुरानी पोस्ट है, लेकिन मैंने कुछ जवाबों को एक jQuery आवरण फ़ंक्शन में जोड़ दिया है जो कि चेनिंग का समर्थन करता है। आशा है कि इससे किसी को लाभ होगा:

$.fn.queueAddClass = function(className) {
    this.queue('fx', function(next) {
        $(this).addClass(className);
        next();
    });
    return this;
};

और यहाँ एक removeClass आवरण है:

$.fn.queueRemoveClass = function(className) {
    this.queue('fx', function(next) {
        $(this).removeClass(className);
        next();
    });
    return this;
};

अब आप इस तरह से सामान कर सकते हैं - 1sec प्रतीक्षा करें, जोड़ें .error, 3secs प्रतीक्षा करें, निकालें .error:

$('#div').delay(1000).queueAddClass('error').delay(2000).queueRemoveClass('error');

Comments

बहुत मददगार! धन्यवाद!

— फाबियान जागर

Answer 4

jQuery का CSS हेरफेर कतारबद्ध नहीं है, लेकिन आप इसे 'fx' कतार के अंदर निष्पादित कर सकते हैं:

$('#div').delay(1000).queue('fx', function() { $(this).removeClass('error'); });

कॉलिंगटाइम के रूप में काफी समान है लेकिन इसके बजाय jQuery के कतार mecanism का उपयोग करता है।

Comments

यह मेरे लिए बेहतर तरीके से स्वीकार किए गए उत्तर (कॉल को दोहराता नहीं है अगर कक्षा में संक्रमण परिवर्तन होता है)।

— वातावले

Answer 5

निश्चित रूप से यह अधिक सरल होगा यदि आप इस तरह jQuery का विस्तार करते हैं:

$.fn.addClassDelay = function(className,delay) {
    var $addClassDelayElement = $(this), $addClassName = className;
    $addClassDelayElement.addClass($addClassName);
    setTimeout(function(){
        $addClassDelayElement.removeClass($addClassName);
    },delay);
};

उसके बाद आप इस फ़ंक्शन का उपयोग कर सकते हैं जैसे addClass:

$('div').addClassDelay('clicked',1000);

Comments

और यदि आप return this

— जंजीर

Answer 6

देरी एक कतार पर चल रही है। और जहाँ तक मुझे पता है कि सीएसएस हेरफेर (चेतन के माध्यम से अन्य) पंक्तिबद्ध नहीं है।

Answer 7

delayकोई भी कतार कार्यों पर काम नहीं करता है, इसलिए हमें उपयोग करना चाहिए setTimeout()।

और आपको चीजों को अलग करने की आवश्यकता नहीं है। आपको बस एक setTimeOutविधि में सब कुछ शामिल करना होगा :

setTimeout(function () {
    $("#div").addClass("error").delay(1000).removeClass("error");
}, 1000);

Comments

आपको सेटटाइमआउट () के साथ विलंब () का उपयोग करने की आवश्यकता नहीं है।

— मत्तीयाओ

@MattYao मुझे नहीं लगता कि आपको यह विचार मिलता है। यदि आप

— सेटटाइमआउट का

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

— मट्टायो

Answer 8

इसे इस्तेमाल करे:

function removeClassDelayed(jqObj, c, to) {    
    setTimeout(function() { jqObj.removeClass(c); }, to);
}
removeClassDelayed($("#div"), "error", 1000);

Answer 9

इस सरल तीर funtion का प्रयास करें:

setTimeout( () => { $("#div").addClass("error") }, 900 );