वर्तमान एनीमेशन चल रहा है, जबकि अगली एनीमेशन शुरू करने के लिए कूदना रोकें - जावास्क्रिप्ट, jquery, सीएसएस, सीएसएस 3

मैं एनीमेशन jquerys के साथ एक dom-object हूँमाउसओवर / माउसआउट घटनाएं। यह ठीक काम करता है, जब तक कि पिछली एनीमेशन चल रही हो, तब तक माउस प्रवेश / निकाला नहीं जाता है। यह फिर अगली एनीमेशन की शुरुआत में कूदता है जो बदसूरत दिखता है।

यह कैसे टाला जा सकता है?

$("#leftlogo").on("mouseover", function(t) {
$(t.target).css("animation-name", "left-over");
}).on("mouseout", function(t) {
$(t.target).css("animation-name", "left-out");
});

उत्तर:

CSS3 एनीमेशन घटनाओं: http://www.sitepoint.com/css3-animation-javascript-event-handlers/

जंजीर jQuery कॉल के बजाए, आप CSS3 एनीमेशनेंड इवेंट सहित कई ईवेंट के लिए 1 .on () हैंडलर का उपयोग कर सकते हैं।

  //set boolean when animating
var isAnimating = false;

$("#leftlogo").on({
//handle mouseover
"mouseover": function(t) {
$(t.target).css("animation-name", "left-over");
isAnimating = true;
},
//handle animationend event
"animationend": function(e) {
if (e.animationName == "animation-name")
{  isAnimating = false; }
},
//handle mouseout
"mouseout": function(t) {
while (isAnimating != false)
{
//hang on a sec
};

$(t.target).css("animation-name", "left-out");
});

ध्यान दें कि यह परीक्षण नहीं किया गया है - आपको डब्ल्यू / सशर्त खेलना पड़ सकता है।

यह भी यहां परिलक्षित नहीं है कि यह .css () के बजाय .addClass () और .removeClass () का उपयोग करने के लिए बेहतर अभ्यास है। यह आपकी शैली परिभाषाओं को सीएसएस में रखता है और केवल जेएस में तर्क रखता है।

मेरी सलाह है कि keyframe एनिमेशन के साथ smoothing से बचने के लिए बालदार CSS3 एनीमेशन घटनाओं</ Strong> और उपयोग करें transition बजाय। मुझे पता है कि आप क्या पूछ रहे हैं, लेकिन मैं आपको वैकल्पिक रूप से कोड का एक कप बचाने के लिए यह विकल्प दे रहा हूं जबकि आपको केवल एक चम्मच की आवश्यकता हो सकती है। कुछ सालों में शायद यह क्लीनर होगा।

#leftlogo {
transition: all 1s;
background: pink;
}

#leftlogo:hover{
background: yellow;
}