jQuery Make item 'flash' when clicked -

मेरे पास निम्न कोड है:

  & lt; style & gt; । इनपुट खोलें,। एक {बॉर्डर-शीर्ष: 1px ठोस # 96d1f8; पृष्ठभूमि: # बी 2 डी 4 ईब; पृष्ठभूमि: -वेबकिट-ग्रेडिएंट (रैखिक, बायां शीर्ष, बायां नीचे, (# 9ebbce) से, (# बी 2 डी 4 ईब)); पृष्ठभूमि: -वेबकिट-रैखिक-ढाल (शीर्ष, # 9ebbce, # b2d4eb); पृष्ठभूमि: -मोझ-रैखिक-ढाल (शीर्ष, # 9ebbce, # b2d4eb); पृष्ठभूमि: -एमएमएस-रैखिक-ढाल (शीर्ष, # 9ebbce, # b2d4eb); पृष्ठभूमि: -ओ-रैखिक-ढाल (शीर्ष, # 9ebbce, # b2d4eb); पैडिंग: 5px 10px; -वेबकिट-सीमा-त्रिज्या: 8px; -मोझ-सीमा-त्रिज्या: 8px; सीमा-त्रिज्या: 8px; -वेबकिट-बॉक्स-छाया: आरजीबीए (0,0,0,1) 0 1 पीएक्स 0; -मोझ-बॉक्स-छाया: आरजीबीए (0,0,0,1) 0 1 पीएक्स 0; बॉक्स-छाया: आरजीबीए (0,0,0,1) 0 1 पीएक्स 0; पाठ-छाया: आरजीबीए (0,0,0, .4) 0 1 पीएक्स 0; कला रंग; } .submitHighlight {पृष्ठभूमि: # FFFF99; } .BtnSmall {width: 15em; सही नाव; मार्जिन-दायें: 2 एएम; मार्जिन-नीचे: 1 एएम; कुछ भी डिस्प्ले मत करो; } & Lt; / style & gt; & Lt; स्क्रिप्ट भाषा = "जावास्क्रिप्ट" src = ".. \। जेनेरिक \ jAVASCRIPT \ jQuery-min.js" प्रकार = "टेक्स्ट / जावास्क्रिप्ट" & gt; & lt; / स्क्रिप्ट & gt; & Lt; स्क्रिप्ट भाषा = "जावास्क्रिप्ट" src = ".. \ जेनेरिक \ jAVASCRIPT \ jQuery-ui-min.js" प्रकार = "टेक्स्ट / जावास्क्रिप्ट" & gt; & lt; / स्क्रिप्ट & gt; & Lt; स्क्रिप्ट भाषा = "जावास्क्रिप्ट" & gt; $ (Document) .ready (function () {$ ("# SG1")। क्लिक (function () {$ (this)। Parent ()। Switchclass ('submit', 'submitHighlight', 'slow') देरी (2000) .switchClass ('submitHighlight', 'submit', 'धीमी');})}) & lt; / script & gt; & Lt; p वर्ग = "सबमिट करें" & gt; & Lt; इनपुट आईडी = "एसजी 1" वर्ग = "बीटीएनएसएमएल" प्रकार = "जमा करें" नाम = "जमा करें" मान = "एसजी 1" शैली = "प्रदर्शन: इनलाइन-ब्लॉक;" & gt; & Lt; / p & gt;  

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

सबसे ज्यादा निकटतम मैं अभी तक उपरोक्त कोड के साथ मिल गया है, लेकिन वह 'फ्लैश' से कहीं ज्यादा है, और अधिक हकलाना है

इस बारे में जाने का सबसे अच्छा तरीका क्या होगा?

मैंने चेतन का प्रयोग करने की कोशिश की, लेकिन एक एडी / एडेड क्लास को एनीमेट करने का तरीका नहीं देख सका।

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

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

  # SG1 {padding: 5px 10px; -वेबकिट-सीमा-त्रिज्या: 8px; -मोझ-सीमा-त्रिज्या: 8px; सीमा-त्रिज्या: 8px; -वेबकिट-बॉक्स-छाया: आरजीबीए (0,0,0,1) 0 1 पीएक्स 0; -मोझ-बॉक्स-छाया: आरजीबीए (0,0,0,1) 0 1 पीएक्स 0; बॉक्स-छाया: आरजीबीए (0,0,0,1) 0 1 पीएक्स 0; पाठ-छाया: आरजीबीए (0,0,0, .4) 0 1 पीएक्स 0; कला रंग; }। सबमिट करें # एसजी 1 {बॉर्डर-टॉप: 1 पीएक्स ठोस # 96d1f8; पृष्ठभूमि: # बी 2 डी 4 ईब; पृष्ठभूमि: -वेबकिट-ग्रेडिएंट (रैखिक, बायां शीर्ष, बायां नीचे, (# 9ebbce) से, (# बी 2 डी 4 ईब)); पृष्ठभूमि: -वेबकिट-रैखिक-ढाल (शीर्ष, # 9ebbce, # b2d4eb); पृष्ठभूमि: -मोझ-रैखिक-ढाल (शीर्ष, # 9ebbce, # b2d4eb); पृष्ठभूमि: -एमएमएस-रैखिक-ढाल (शीर्ष, # 9ebbce, # b2d4eb); पृष्ठभूमि: -ओ-रैखिक-ढाल (शीर्ष, # 9ebbce, # b2d4eb); } .submitHighlight # SG1 {background: # FFFF99; } .BtnSmall {width: 15em; सही नाव; मार्जिन-दायें: 2 एएम; मार्जिन-नीचे: 1 एएम; कुछ भी डिस्प्ले मत करो; }  

आप कुछ सीएसएस संक्रमण में जोड़ सकते हैं, साथ ही रंग परिवर्तन को सुचारू करने के लिए यदि आप भद्दा महसूस कर रहे हैं। तो आपके पास ऐसा कुछ के प्रारंभिक # SG1 शैली नियम होंगे:

  # SG1 {padding: 5px 10px; -वेबकिट-सीमा-त्रिज्या: 8px; -मोझ-सीमा-त्रिज्या: 8px; सीमा-त्रिज्या: 8px; -वेबकिट-बॉक्स-छाया: आरजीबीए (0,0,0,1) 0 1 पीएक्स 0; -मोझ-बॉक्स-छाया: आरजीबीए (0,0,0,1) 0 1 पीएक्स 0; बॉक्स-छाया: आरजीबीए (0,0,0,1) 0 1 पीएक्स 0; पाठ-छाया: आरजीबीए (0,0,0, .4) 0 1 पीएक्स 0; कला रंग; संक्रमण: पृष्ठभूमि 1s आसानी; }