2010-07-13 15 views
18

किसी को भी पता है अगर jQuery की तरह एक एनीमेशन संभाल कर सकते हैं:jQuery + RGBA रंग एनिमेशन

rgba(0,0,0,0.2) → rgba(0,255,0,0.4)

मैं जानता हूँ कि वहाँ एक plugin रंग एनिमेशन को संभालने के लिए, लेकिन यह भी आधुनिक हो सकता है?

+0

इस सवाल पर उपयोगी जवाब से अधिक नकल चिह्नित: http://stackoverflow.com/questions/4194745/changing-rgba -alpha-transparency-with-jquery – jedierikb

उत्तर

8

उह, कभी नहीं। Jquery रंग प्लगइन में एक अद्भुत संशोधन मिला।

http://pioupioum.fr/sandbox/jquery-color/

+1

उम, बस रुचि रखने वालों के लिए एक और यादृच्छिक शीतलता जोड़ने के लिए। PHP छवि उत्पादन के माध्यम से आरजीबीए क्रॉस ब्राउज़र: http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/ – Matrym

+1

दुर्भाग्यवश यह संशोधित संस्करण आधुनिक ब्राउज़र का समर्थन नहीं करता है :( –

25

CSS3 के एनीमेशन (कोई जावास्क्रिप्ट)

का उपयोग करते हुए आप यह भी CSS3 के एनीमेशन का उपयोग कर एक ही प्रभाव को प्राप्त कर सकते हैं। नीचे देखें,

चरण 1: उपयोग एनीमेशन नियम: अपने एनीमेशन

@keyframes color_up { 
    from { 
     background-color: rgba(0,0,0,0.2); 
    } 
    to { 
     background-color: rgba(0,255,0,0.4); 
    } 
} 

चरण 2 के लिए कोई मुख्य-फ़्रेम बनाएँ।

animation-name: color_up; 
    animation-duration: 2s; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
    animation-timing-function: ease-in-out; 

डेमो:http://jsfiddle.net/2Dbrj/3/

jQuery का उपयोग

jQuery अब भी साथ RGBA समर्थन color एनीमेशन का समर्थन करता है। यह वास्तव में एक रंग से दूसरे रंग में एनिमेट करता है।

$(selector).animate({ 
    backgroundColor: 'rgba(0,255,0,0.4)' 
}); 

डेमो: http://jsfiddle.net/2Dbrj/2/

+0

अद्भुत! धन्यवाद! –

+0

@DjangoReinhardt CSS3 –

+1

के साथ अद्यतन उत्तर CSS3 CSS3 JSFiddle क्रोम में काम नहीं करना प्रतीत होता है। धन्यवाद, हालांकि! –

2

संभाल के लिए उपयोग jquery UI कि, $(object).animate({color : 'rgba(0,0,0,.2)'},500)

संबंधित मुद्दे