JQuery के साथ बॉक्स-छाया एनिमेट करने का सही तरीका




css3 jquery-animate (4)

प्रत्यक्ष उत्तर

छाया एनीमेशन के लिए एडविन मार्टिन की jQuery प्लगइन का उपयोग करना, जो .animate विधि को .animate है, आप बस "बॉक्सशैडो" के साथ सामान्य वाक्यविन्यास का उपयोग कर सकते हैं और उसके हर पहलू - रंग , एक्स- और वाई-ऑफसेट , धुंध-त्रिज्या और फैल- त्रिज्या - एनिमेटेड हो जाता है। इसमें कई छाया समर्थन शामिल हैं।

$(element).animate({ 
  boxShadow: "0px 0px 5px 3px hsla(100, 70%, 60%, 0.8)"
}); 

इसके बजाय सीएसएस एनिमेशन का उपयोग करना

jQuery डीओएम तत्वों की style संपत्ति को बदलकर एनिमेट करता है, जो विशिष्टता के साथ आश्चर्य का कारण बन सकता है और स्टाइल की जानकारी को आपकी स्टाइलशीट से बाहर ले जा सकता है।

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

@keyframes shadowPulse {
    0% {
        box-shadow: 0px 0px 10px 0px hsla(0, 0%, 0%, 1);
    }

    100% {
        box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0);
    }
}

.shadow-pulse {
    animation-name: shadowPulse;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

इसके बाद आप animationend के अंत को सिंक्रनाइज़ करने के लिए देशी animationend संपत्ति का उपयोग कर सकते हैं जो आप अपने जेएस कोड में कर रहे थे:

$(element).addClass('shadow-pulse');
$(element).on('animationend', function(){    
    $(element).removeClass('shadow-pulse');
    // do something else...
});

JQuery के साथ बॉक्स-छाया संपत्ति को एनिमेट करने के लिए सही वाक्यविन्यास कौन सा है?

$().animate({?:"0 0 5px #666"});

प्लगइन के बिना इसे कैसे किया जाए इसका एक उदाहरण यहां दिया गया है: jQuery एनिमेटेड बॉक्स लेकिन इसमें प्लगइन के उपयोग के साथ आने वाली अतिरिक्त कार्यक्षमता नहीं है, लेकिन मैं पागलपन के पीछे विधि को देखना (और समझना) पसंद करता हूं।


यदि आप jQuery 1.4.3+ का उपयोग कर रहे हैं तो आप जोड़े गए cssHooks कोड का लाभ उठा सकते हैं।

बॉक्सशैड हुक का उपयोग करके: https://github.com/brandonaaron/jquery-cssHooks/blob/master/boxshadow.js

आप ऐसा कुछ कर सकते हैं:

$('#box').animate({
    'boxShadowX': '10px',
    'boxShadowY':'10px',
    'boxShadowBlur': '20px'
});

हुक आपको अभी तक रंग को एनिमेट नहीं करने देता है, लेकिन मुझे यकीन है कि कुछ काम जो जोड़ा जा सकता है।

उदाहरण: http://jsfiddle.net/petersendidit/w5aAn/


यदि आप प्लगइन का उपयोग नहीं करना चाहते हैं, तो इसे कुछ सीएसएस के साथ किया जा सकता है:

#my-div{    
  background-color: gray;
  animation: shadowThrob 0.9s infinite;
  animation-direction: alternate;
  -webkit-animation: shadowThrob 0.9s ease-out infinite;
  -webkit-animation-direction: alternate;
}
@keyframes shadowThrob {
  from {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.9);}
  to {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.2);}
}
@-webkit-keyframes shadowThrob {
  from {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.9);}
  to {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.2);}
}
/*NOTE: The animation property is not supported in Internet Explorer 9 and earlier versions.*/

इसे देखें: http://jsfiddle.net/Z8E5U/

यदि आप सीएसएस एनिमेशन पर पूर्ण दस्तावेज चाहते हैं, तो जादूगर के लिए आपका रास्ता यहां शुरू होता है ..







box-shadow