आप jQuery में एक तत्व "फ्लैश" कैसे बनाते हैं


249

मैं jQuery के लिए बिल्कुल नया हूं और प्रोटोटाइप का उपयोग करने का कुछ अनुभव है। प्रोटोटाइप में, एक तत्व "फ्लैश" करने की एक विधि है - अर्थात। संक्षेप में इसे दूसरे रंग में हाइलाइट करें और इसे वापस सामान्य करने के लिए फीका कर दें ताकि उपयोगकर्ता की आंख इसे आकर्षित करे। क्या jQuery में ऐसी कोई विधि है? मैं fadeIn, fadeOut और चेतन देखता हूं, लेकिन मुझे "फ़्लैश" जैसा कुछ दिखाई नहीं देता। शायद इन तीनों में से किसी एक का उपयोग उचित इनपुट के साथ किया जा सकता है?


4
यह ओपी का जवाब नहीं देता है, लेकिन (शिथिल परीक्षण) कोड भविष्य के Google खोजकर्ताओं के लिए उपयोगी हो सकता है (जैसे स्वयं):$.fn.flash = function(times, duration) { var T = this; times = times || 3; duration = duration || 200; for ( var i=0; i < times; i++ ) { (function() { setTimeout(function() { T.fadeOut(duration, function() { T.fadeIn(duration); }); }, i*duration*2+50); })(i); } };
Cory Mawhorter

3
इस सीएसएस को तत्व में जोड़ें: text-decoration:blinkऔर फिर इसे हटा दें।
दमनक


मैंने एक JSField डेमो यहां पर रखा है जो मुझे लगता है कि इस पृष्ठ पर पाए जाने से बेहतर उत्तर है: stackoverflow.com/a/52283660/470749
रयान

कृपया ध्यान दें कि ब्लिंक को आधिकारिक तौर पर एनिमेशन के पक्ष में चित्रित किया गया है। यहां देखें: w3.org/TR/2019/CR-css-text-decor-3-20190813/#valdef-text-decoration-line-blink
OrizG

जवाबों:


318

मेरा रास्ता है .fadein, .fadeout .fadein, .fadeout ......

$("#someElement").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);


14
सबसे सुंदर समाधान नहीं है, लेकिन छोटा, समझने में आसान है, और इसके लिए यूआई / प्रभाव की आवश्यकता नहीं है। अच्छा!
क्रिस जेनेस

21
मैं fadeIn, fadeOut अनुक्रम से पहले एक देरी का उपयोग करता हूं, कुछ इस तरह $('..').delay(100).fadeOut().fadeIn('slow')
alexandru.topliceanu

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

4
इस पद्धति के साथ समस्या यह है कि ये घटनाएं संभावित रूप से एक दूसरे पर कदम रख रही हैं। आपको संभवतः प्रत्येक बाद के फीके और फीते को उनके संबंधित कॉलबैक में डाल देना चाहिए। उदाहरण के लिए: var $someElement = $("#someElement"); $someElement.fadeIn(100, function(){ $someElement.fadeOut(100, function(){ /*...etc...*/ }) })
akingoftruth

सत्यापन कोड में इसका उपयोग करने से सावधान रहें जिसे अक्सर कहा जा सकता है। यदि कोड को सही समय के साथ कहा जाता है, तो आप एक तत्व को दिखा सकते हैं जब यह नहीं होना चाहिए (या इसके विपरीत)
क्रिस Pfohl

122

आप jQuery के रंग प्लगइन का उपयोग कर सकते हैं ।

उदाहरण के लिए, अपने पृष्ठ के सभी divs पर ध्यान आकर्षित करने के लिए, आप निम्नलिखित कोड का उपयोग कर सकते हैं:

$("div").stop().css("background-color", "#FFFF9C")
    .animate({ backgroundColor: "#FFFFFF"}, 1500);

संपादित करें - नया और बेहतर

निम्नलिखित उपरोक्त के समान तकनीक का उपयोग करता है, लेकिन इसके अतिरिक्त लाभ हैं:

  • पैरामीटरयुक्त हाइलाइट रंग और अवधि
  • मूल पृष्ठभूमि रंग को बनाए रखने के बजाय, यह मानते हुए कि यह सफेद है
  • jQuery का एक्सटेंशन होने के कारण, आप इसे किसी भी ऑब्जेक्ट पर उपयोग कर सकते हैं

JQuery ऑब्जेक्ट बढ़ाएँ:

var notLocked = true;
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css("backgroundColor");
    if (notLocked) {
        notLocked = false;
        this.stop().css("background-color", highlightBg)
            .animate({backgroundColor: originalBg}, animateMs);
        setTimeout( function() { notLocked = true; }, animateMs);
    }
};

उपयोग उदाहरण:

$("div").animateHighlight("#dd0000", 1000);

4
मेरे लिए भी काम नहीं करता है - क्या आप सुनिश्चित हैं कि यह रंग एनिमेशन प्लगइन पर निर्भर नहीं है? plugins.jquery.com/project/color
UpTheCreek

18
जंकरी डॉक्स ऑन .animate () से: सभी एनिमेटेड गुण एक एकल संख्यात्मक मान (नीचे उल्लिखित को छोड़कर) होना चाहिए; ऐसे गुण जो गैर-संख्यात्मक हैं, बुनियादी jQuery कार्यक्षमता का उपयोग करके एनिमेटेड नहीं हो सकते। (उदाहरण के लिए, चौड़ाई, ऊंचाई, या बाईं ओर एनिमेटेड हो सकता है, लेकिन पृष्ठभूमि-रंग नहीं हो सकता है।) इसलिए मुझे लगता है कि आप इसे महसूस किए बिना एक प्लगइन का उपयोग कर रहे हैं।
उपराष्ट्रपति

4
मैंने देखा कि यह एक वस्तु वापस नहीं किया। मैंने इस छोटे से प्रभाव को रोकने की कोशिश की (ईजी: $ ("# क्त्योनहैंड")। चेतनहिगलाइट ("# c3d69b", 1500)। डेली (1500) .animateHighlight ("# 769xC", 5000);) और एक त्रुटि मिली। मुझे "इसे वापस करने;" विधि के अंत तक।
साधु

2
आधिकारिक jQuery डॉक्स का कहना है कि आपको काम करने के लिए jQuery.Color () प्लगइन का उपयोग करना होगा: github.com/jquery/jquery-color
jchook

3
Jquery .animate डॉक्स से: Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated.- यदि आप कलर को चेतन करना चाहते हैं, तो आपको jQuery UI या कुछ अन्य प्लगइन की आवश्यकता है।
एडम टॉमत

101

आप एक तत्व को फ्लैश करने के लिए css3 एनिमेशन का उपयोग कर सकते हैं

.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-webkit-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-moz-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-ms-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

और आप वर्ग को जोड़ने के लिए jQuery

jQuery(selector).addClass("flash");

अच्छा समाधान, अगर इसे केवल एक बार काम करने की आवश्यकता है। कक्षा जोड़े जाने के बाद, बाद में कक्षा को जोड़ना (तार्किक रूप से) तत्व को चमकाने में परिणाम नहीं करता है।
सिमोन

7
अब तक का सबसे अच्छा विचार। मैंने प्रभाव के बाद कक्षा 2 सेकंड को हटाने के लिए एक निपटारा का उपयोग किया
अंकित करें

6
यहां एनीमेशन के बाद कक्षा को हटाने का एक उदाहरण दिया गया है ताकि आप इसे फ्लैश कर सकें। jsfiddle.net/daCrosby/eTcXX/1
DACrosby

महान, वह काम करता है, लेकिन ध्यान दें कि यदि आप एक स्टाइल शीट सत्यापनकर्ता पास करना चाहते हैं, तो पृष्ठभूमि-रंग के लिए सही संपत्ति 'कोई नहीं' के बजाय 'पारदर्शी' है।
जनवरी एम

1
ध्यान दें कि सभी आधुनिक ब्राउज़र अब नियमित @keyframesऔर animationनियमों का समर्थन करते हैं, इसलिए शायद -webkit- (ब्लैकबेरी ब्राउज़र के लिए) के अलावा किसी भी उपसर्ग संस्करण का उपयोग करने की आवश्यकता नहीं है।
coredumperror

75

5 साल बाद ... (और कोई अतिरिक्त प्लगइन की जरूरत नहीं)

यह आपके द्वारा इच्छित रंग (जैसे सफ़ेद) को इसके पीछे एक दिव्य पृष्ठभूमि रंग डालकर "दाल" करता है , और फिर वस्तु को बाहर और फिर से लुप्त होती है

HTML ऑब्जेक्ट (जैसे बटन):

<div style="background: #fff;">
  <input type="submit" class="element" value="Whatever" />
</div>

jQuery (वेनिला, कोई अन्य प्लगइन्स):

$('.element').fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });

तत्व - वर्ग का नाम

पहले नंबर में fadeTo()- संक्रमण के लिए मिलीसेकेंड

दूसरे नंबर में fadeTo()- फीका / सामने आने के बाद ऑब्जेक्ट की अपारदर्शिता

आप इस वेबपृष्ठ के निचले दाएं कोने में इसे देख सकते हैं: https://single.majlovesreg.one/v1/

संपादित करें (विलस्टेल) $ (यह) का उपयोग करके कोई डुप्लिकेट किए गए चयनकर्ता नहीं है और एक फ्लैश (ओपी के अनुरोध के अनुसार) को एक्यूट प्रदर्शन करने के लिए मूल्यों को घुमाया।


60
fadeTo(0000)- मेटालिका
वल्केन रावेन

2
मक्खन के रूप में चिकना! सभी का सबसे अच्छा समाधान। धन्यवाद!
कोल्डटन

1
इस अनंत को कैसे करें?
tomexsans

1
उदाहरण लिंक टूट गया।
मेश

2
@tomexsans $.fn.flashUnlimited=function(){$(this).fadeTo('medium',0.3,function(){$(this).fadeTo('medium',1.0,$(this).flashUnlimited);});}आप तब इसे कॉल कर सकते हैं $('#mydiv').flashUnlimited();- यह वह है जो माजल ने उत्तर दिया था, और चक्र के अंत में खुद को फिर से कॉल करता है।
जे। दादानिया

46

मुझे लगता है कि आप इसे प्राप्त करने के लिए jQuery UI में हाइलाइट प्रभाव का उपयोग कर सकते हैं ।


8
यह jQueryUI का हिस्सा है, जो बहुत भारी है, मानक jQuery लाइब्रेरी का हिस्सा नहीं है (हालाँकि आप यूआई इफ़ेक्ट कोर का उपयोग कर सकते हैं, जो इस पर निर्भर करता है)।
UpTheCreek

3
आप केवल उन प्रभावों को डाउनलोड कर सकते हैं जो आप चाहते हैं + कोर, जो "हाइलाइट" + "पल्सेट" मात्रा के लिए 12 KB है। पूरी तरह से प्रकाश नहीं, लेकिन इतना भारी भी नहीं।
रोमन स्टार्कोव

45

यदि आप jQueryUI का उपयोग कर रहे हैं, तो pulsateफंक्शन इन हैUI/Effects

$("div").click(function () {
      $(this).effect("pulsate", { times:3 }, 2000);
});

http://docs.jquery.com/UI/Effects/Pulsate


1
@DavidYell, एक नया प्रश्न खोलें और कुछ नमूना कोड पोस्ट करें। pulsateक्रोम में ठीक काम करता है।
SooDesuNe

हर 5 सेकंड पर ब्लिंक करें: सेटइंटरवल (फ़ंक्शन () {$ ("रेड-फ्लैग")। प्रभाव ("स्पंदना", {बार: 3}, 2000);}; 5000)।
एड्रियन पी।

@ किसी को भी अब अगर यह css3 एनिमेशन और / या परिवर्तन का उपयोग करता है? वैसे भी अच्छा है (लेकिन फिर भी मैं अन्य उत्तरों में से एक में css3 पसंद करता हूं)
मार्टिन मेसेर

18
$('#district').css({opacity: 0});
$('#district').animate({opacity: 1}, 700 );

1
यह सिर्फ सरल और सुरुचिपूर्ण है।
Gra

अन्य भाई तत्वों का उपयोग fadeInऔर fadeOutप्रभावित करते समय क्योंकि यह सीएसएस displayसंपत्ति को जन्म देता है, मेरे मामले में अजीब लगता है। लेकिन यह एक समस्या को ठीक करता है। धन्यवाद, यह एक आकर्षण की तरह सुरुचिपूर्ण ढंग से काम करता है।
fsevenm

15

आप इस प्लगइन का उपयोग कर सकते हैं (इसे js फ़ाइल में रखें और स्क्रिप्ट-टैग के माध्यम से उपयोग करें)

http://plugins.jquery.com/project/color

और फिर कुछ इस तरह का उपयोग करें:

jQuery.fn.flash = function( color, duration )
{

    var current = this.css( 'color' );

    this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );
    this.animate( { color: current }, duration / 2 );

}

यह सभी jQuery वस्तुओं के लिए एक 'फ़्लैश' विधि जोड़ता है:

$( '#importantElement' ).flash( '255,0,0', 1000 );

12

आप Desheng Li की विधि को आगे बढ़ा सकते हैं ताकि पुनरावृत्तियों को गिनने की अनुमति मिल सके, जैसे कि कई फ़्लैश करना।

// Extend jquery with flashing for elements
$.fn.flash = function(duration, iterations) {
    duration = duration || 1000; // Default to 1 second
    iterations = iterations || 1; // Default to 1 iteration
    var iterationDuration = Math.floor(duration / iterations);

    for (var i = 0; i < iterations; i++) {
        this.fadeOut(iterationDuration).fadeIn(iterationDuration);
    }
    return this;
}

तब आप विधि को फ्लैश के समय और संख्या के साथ कॉल कर सकते हैं:

$("#someElementId").flash(1000, 4); // Flash 4 times over a period of 1 second

बदल दिया var iterationDuration = Math.floor(duration / iterations);ताकि आप विषम संख्याओं से विभाजित कर सकें और इसे बनाया return this;ताकि आप इसके बाद अन्य तरीकों की श्रृंखला बना सकें।
user1477388

यह वास्तव में किसी भी चीज़ का रंग नहीं बदलता है?
रात्रि

12

शुद्ध jQuery का समाधान।

(कोई jquery-ui / चेतन / रंग की जरूरत है।)

यदि आप चाहते हैं कि पीले रंग का "फ्लैश" प्रभाव बिना जेकरी रंग लोड किए:

var flash = function(elements) {
  var opacity = 100;
  var color = "255, 255, 20" // has to be in this format since we use rgba
  var interval = setInterval(function() {
    opacity -= 3;
    if (opacity <= 0) clearInterval(interval);
    $(elements).css({background: "rgba("+color+", "+opacity/100+")"});
  }, 30)
};

ऊपर स्क्रिप्ट बस 1s पीले फीका करता है, उपयोगकर्ता को यह बताने के लिए एकदम सही है कि तत्व अपडेट किया गया था या कुछ इसी तरह का।

उपयोग:

flash($('#your-element'))

इस समाधान से प्यार करें, पृष्ठभूमि को छोड़कर यह क्या हुआ करता था
MrPHP

7

यह एक अधिक अद्यतित उत्तर हो सकता है, और कम है, क्योंकि इस पोस्ट के बाद से चीजों को कुछ हद तक समेकित किया गया है। आवश्यक है jQuery-ui प्रभाव-प्रकाश डाला

$("div").click(function () {
  $(this).effect("highlight", {}, 3000);
});

http://docs.jquery.com/UI/Effects/Highlight


7

कैसे एक बहुत ही सरल जवाब के बारे में?

$('selector').fadeTo('fast',0).fadeTo('fast',1).fadeTo('fast',0).fadeTo('fast',1)

दो बार झपकी ... यह सब लोग है!


यह एक और रंग में नहीं झपकता है (जो कि अनुरोध किया गया था) यह बस और बाहर अस्पष्टता को फीका करता है।
टिम एक्सेल

6

मुझे विश्वास नहीं हो रहा है कि यह अभी तक इस सवाल पर नहीं है। तुम सब करना होगा:

("#someElement").show('highlight',{color: '#C8FB5E'},'fast');

यह वही करता है जो आप इसे करना चाहते हैं, सुपर आसान है, दोनों show()और hide()तरीकों के लिए काम करता है ।


15
नोट: इसे काम करने के लिए, आपको jquery ui के प्रभावों को जोड़ा जाना चाहिए। यह मूल jQuery का हिस्सा नहीं है
ट्रैविस -148

6

नाड़ी का प्रभाव(ऑफलाइन) JQuery प्लगइन क्या आप के लिए देख रहे हो के लिए उपयुक्त हो?

आप समय में नाड़ी प्रभाव को सीमित करने के लिए एक अवधि जोड़ सकते हैं।


जैसा कि जेपी ने टिप्पणियों में बताया है , अब उनका अद्यतन पल्स प्लगइन है
उसका गितहब रेपो देखें । और यहाँ एक डेमो है


अपडेटेड पल्स प्लगइन: james.padolsey.com/javascript/simple-pulse-plugin-for-jquery
जेम्स

डेमो टूट गया है, क्योंकि जिस js लाइब्रेरी को संदर्भित करता है वह मौजूद नहीं है
PANDWood

@PandWood मैंने GitHub रेपो के लिंक को पुनर्स्थापित कर दिया है और डेमो अपडेट किया है
VonC

6
function pulse() {
    $('.blink').fadeIn(300).fadeOut(500);
}
setInterval(pulse, 1000);

1
बिल्कुल सही। में और फीका में सरल, और पूर्ण नियंत्रण।
पोनोलिसिस

5

यह कई चंद्रमाओं को बाद में मिला लेकिन अगर किसी को परवाह है, तो ऐसा लगता है कि यह स्थायी रूप से चमकने के लिए कुछ पाने का एक अच्छा तरीका है:

$( "#someDiv" ).hide();

setInterval(function(){
     $( "#someDiv" ).fadeIn(1000).fadeOut(1000);
},0)

4

निम्नलिखित कोड मेरे लिए काम करते हैं। दो फीका-इन और फीका-आउट कार्यों को परिभाषित करें और उन्हें एक दूसरे के कॉलबैक में डालें।

var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);

निम्नलिखित चमक के समय को नियंत्रित करता है:

var count = 3;
var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { if (--count > 0) $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);

4

मैं इस समस्या का हल ढूंढ रहा था लेकिन jQuery UI पर निर्भर हुए बिना।

यह वही है जिसके साथ मैं आया था और यह मेरे लिए काम करता है (कोई प्लगइन्स नहीं, बस जावास्क्रिप्ट और jQuery); - काम कर रहे बेला Heres - http://jsfiddle.net/CriddleCraddle/yYcaY/2/

अपनी CSS फ़ाइल में वर्तमान CSS पैरामीटर को सामान्य सीएसएस के रूप में सेट करें, और एक नया वर्ग बनाएं जो बस पैरामीटर को बदल दे अर्थात पृष्ठभूमि-रंग, और इसे डिफ़ॉल्ट व्यवहार को ओवरराइड करने के लिए 'महत्वपूर्ण' सेट करें। इस तरह...

.button_flash {
background-color: #8DABFF !important;
}//This is the color to change to.  

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

नोट: यदि आप 'टाइम' वैरिएबल के लिए एक सम संख्या में पास होते हैं, तो आप उस कक्षा के साथ समाप्त हो जाएंगे जो आपने शुरू किया था, और यदि आप एक विषम संख्या पास करते हैं तो आप टॉगल क्लास के साथ समाप्त हो जाएंगे। दोनों अलग-अलग चीजों के लिए उपयोगी हैं। मैं देरी के समय को बदलने के लिए 'i' का उपयोग करता हूं, या वे एक ही समय में आग लगा देंगे और प्रभाव खो जाएगा।

function flashIt(element, times, klass, delay){
  for (var i=0; i < times; i++){
    setTimeout(function(){
      $(element).toggleClass(klass);
    }, delay + (300 * i));
  };
};

//Then run the following code with either another delay to delay the original start, or
// without another delay.  I have provided both options below.

//without a start delay just call
flashIt('.info_status button', 10, 'button_flash', 500)

//with a start delay just call
setTimeout(function(){
  flashIt('.info_status button', 10, 'button_flash', 500)
}, 4700);
// Just change the 4700 above to your liking for the start delay.  In this case, 
//I need about five seconds before the flash started.  

3

जैसे फैडिन / फैडआउट आप चेतन सीएसएस / विलंब का उपयोग कर सकते थे

$(this).stop(true, true).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100);

सरल और लचीला


3
$("#someElement").fadeTo(3000, 0.3 ).fadeTo(3000, 1).fadeTo(3000, 0.3 ).fadeTo(3000, 1); 

3000 3 सेकंड है

अस्पष्टता 1 से यह 0.3 तक फीका है, फिर 1 और इतने पर।

आप इनमें से अधिक स्टैक कर सकते हैं।

केवल jQuery की जरूरत है। :)


2

पृष्ठभूमि पृष्ठभूमि को चेतन करने के लिए एक समाधान है। इस जिस्ट में एक सरल हाइलाइट विधि और इसके उपयोग का उदाहरण शामिल है।

/* BEGIN jquery color */
  (function(jQuery){jQuery.each(['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','color','outlineColor'],function(i,attr){jQuery.fx.step[attr]=function(fx){if(!fx.colorInit){fx.start=getColor(fx.elem,attr);fx.end=getRGB(fx.end);fx.colorInit=true;}
  fx.elem.style[attr]="rgb("+[Math.max(Math.min(parseInt((fx.pos*(fx.end[0]-fx.start[0]))+fx.start[0]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[1]-fx.start[1]))+fx.start[1]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[2]-fx.start[2]))+fx.start[2]),255),0)].join(",")+")";}});function getRGB(color){var result;if(color&&color.constructor==Array&&color.length==3)
  return color;if(result=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
  return[parseInt(result[1]),parseInt(result[2]),parseInt(result[3])];if(result=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
  return[parseFloat(result[1])*2.55,parseFloat(result[2])*2.55,parseFloat(result[3])*2.55];if(result=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
  return[parseInt(result[1],16),parseInt(result[2],16),parseInt(result[3],16)];if(result=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
  return[parseInt(result[1]+result[1],16),parseInt(result[2]+result[2],16),parseInt(result[3]+result[3],16)];if(result=/rgba\(0, 0, 0, 0\)/.exec(color))
  return colors['transparent'];return colors[jQuery.trim(color).toLowerCase()];}
  function getColor(elem,attr){var color;do{color=jQuery.curCSS(elem,attr);if(color!=''&&color!='transparent'||jQuery.nodeName(elem,"body"))
  break;attr="backgroundColor";}while(elem=elem.parentNode);return getRGB(color);};var colors={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]};})(jQuery);
  /* END jquery color */


  /* BEGIN highlight */
  jQuery(function() {
    $.fn.highlight = function(options) {
      options = (options) ? options : {start_color:"#ff0",end_color:"#fff",delay:1500};
      $(this).each(function() {
        $(this).stop().css({"background-color":options.start_color}).animate({"background-color":options.end_color},options.delay);
      });
    }
  });
  /* END highlight */

  /* BEGIN highlight example */
  $(".some-elements").highlight();
  /* END highlight example */

https://gist.github.com/1068231


2

यदि लाइब्रेरी को शामिल किया जाता है, तो यहां एक समाधान है जो काम करने की गारंटी है।

$('div').click(function() {
    $(this).css('background-color','#FFFFCC');
    setTimeout(function() { $(this).fadeOut('slow').fadeIn('slow'); } , 1000); 
    setTimeout(function() { $(this).css('background-color','#FFFFFF'); } , 1000); 
});
  1. सेटअप इवेंट ट्रिगर

  2. ब्लॉक तत्व की पृष्ठभूमि का रंग निर्धारित करें

  3. थोड़ा एनीमेशन प्रभाव बनाने के लिए सेटटाइमआउट fadeOut और fadeIn का उपयोग करें।

  4. अंदर दूसरा सेटटाइमआउट डिफ़ॉल्ट पृष्ठभूमि रंग रीसेट करता है

    कुछ ब्राउज़रों में परीक्षण किया गया और यह अच्छी तरह से काम करता है।


2

दुर्भाग्यवश शीर्ष उत्तर के लिए JQuery UI की आवश्यकता होती है। http://api.jquery.com/animate/

यहाँ एक वेनिला JQuery समाधान है

http://jsfiddle.net/EfKBg/

जे एस

var flash = "<div class='flash'></div>";
$(".hello").prepend(flash);
$('.flash').show().fadeOut('slow');

सीएसएस

.flash {
    background-color: yellow;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

एचटीएमएल

<div class="hello">Hello World!</div>

यदि आप सिर्फ flashएक jQuery वस्तु बनाते हैं , तो यह ठीक काम करता है। var flash = $("<div class='flash'></div>"); $(".hello").prepend(flash); flash.show().fadeOut('slow');
माइकल ब्लैकबर्न

1

यहाँ colbeerhey के समाधान का थोड़ा सुधार हुआ संस्करण है। मैंने एक रिटर्न स्टेटमेंट जोड़ा ताकि सच्चे jQuery के रूप में, हम एनीमेशन को कॉल करने के बाद घटनाओं की श्रृंखला बना सकें। मैंने कतार को साफ़ करने और एक एनीमेशन के अंत में कूदने के तर्क भी जोड़े हैं।

// Adds a highlight effect
$.fn.animateHighlight = function(highlightColor, duration) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    this.stop(true,true);
    var originalBg = this.css("backgroundColor");
    return this.css("background-color", highlightBg).animate({backgroundColor: originalBg}, animateMs);
};

नोट: पृष्ठभूमि रंगों को एनिमेट करने के लिए रंगों के यूआई प्लगइन के उपयोग की आवश्यकता होती है। देखें: api.jquery.com/animate
मार्तलाक

1

यह एक तत्व की पृष्ठभूमि के रंग को तब तक स्पंदित करेगा जब तक कि एक माउसओवर इवेंट चालू नहीं हो जाता

$.fn.pulseNotify = function(color, duration) {

var This = $(this);
console.log(This);

var pulseColor = color || "#337";
var pulseTime = duration || 3000;
var origBg = This.css("background-color");
var stop = false;

This.bind('mouseover.flashPulse', function() {
    stop = true;
    This.stop();
    This.unbind('mouseover.flashPulse');
    This.css('background-color', origBg);
})

function loop() {
    console.log(This);
    if( !stop ) {
        This.animate({backgroundColor: pulseColor}, pulseTime/3, function(){
            This.animate({backgroundColor: origBg}, (pulseTime/3)*2, 'easeInCirc', loop);
        });
    }
}

loop();

return This;
}

1

उपरोक्त सभी से एक साथ रखें - एक तत्व को चमकाने के लिए एक आसान समाधान और मूल bgcolour पर लौटें ...

$.fn.flash = function (highlightColor, duration, iterations) {
    var highlightBg = highlightColor || "#FFFF9C";
    var animateMs = duration || 1500;
    var originalBg = this.css('backgroundColor');
    var flashString = 'this';
    for (var i = 0; i < iterations; i++) {
        flashString = flashString + '.animate({ backgroundColor: highlightBg }, animateMs).animate({ backgroundColor: originalBg }, animateMs)';
    }
    eval(flashString);
}

इस तरह का उपयोग करें:

$('<some element>').flash('#ffffc0', 1000, 3);

उम्मीद है की यह मदद करेगा!


बुराई से सावधान eval!
बिरला

मुझे पता है, मुझे बस एक त्वरित और गंदे समाधान की आवश्यकता थी। Eval यह कभी कभी का उपयोग करता है!
डंकन

1

यहाँ एक समाधान है जो jQuery और CSS3 एनिमेशन के मिश्रण का उपयोग करता है।

http://jsfiddle.net/padfv0u9/2/

अनिवार्य रूप से आप रंग को अपने "फ्लैश" रंग में बदलकर शुरू करते हैं, और फिर रंग को फीका करने के लिए CSS3 एनीमेशन का उपयोग करते हैं। प्रारंभिक "फ्लैश" के लिए संक्रमण की अवधि बदलने के लिए आपको फीका की तुलना में तेज होना चाहिए।

$(element).removeClass("transition-duration-medium");
$(element).addClass("transition-duration-instant");
$(element).addClass("ko-flash");
setTimeout(function () {
    $(element).removeClass("transition-duration-instant");
    $(element).addClass("transition-duration-medium");
    $(element).removeClass("ko-flash");
}, 500);

जहां सीएसएस कक्षाएं निम्नानुसार हैं।

.ko-flash {
    background-color: yellow;
}
.transition-duration-instant {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}
.transition-duration-medium {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}


1

यह काफी सामान्य है कि आप जो भी कोड को चेतन करना चाहें लिख सकते हैं। तुम भी 300ms से 33ms और फीका रंग, आदि के लिए देरी को कम कर सकते हैं

// Flash linked to hash.
var hash = location.hash.substr(1);
if (hash) {
    hash = $("#" + hash);
    var color = hash.css("color"), count = 1;
    function hashFade () {
        if (++count < 7) setTimeout(hashFade, 300);
        hash.css("color", count % 2 ? color : "red");
    }
    hashFade();
}

1

आप गति और दोहराव और रंग पर नियंत्रण के साथ किसी भी HTML तत्व पर ध्यान केंद्रित करने के लिए मजबूर करने के लिए jquery पल्सेट प्लगइन का उपयोग कर सकते हैं।

JQuery.pulsate () * डेमो के साथ

नमूना प्रारंभ करनेवाला:

  • $ ( "। Pulse4") धड़कना ({गति: 2500})।
  • $ ("कमांडबॉक्स बटन: दृश्यमान")। स्पंदना ({रंग: "# f00", गति: 200, पहुंच: 85, दोहराना: 15})
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.