मेरे पास बबल डिव के कुछ जोड़े हैं जो एक सीएसएस एनीमेशन के साथ तैरते हैं। JQuery के साथ मैं hovering के दौरान एनीमेशन को रोकना चाहता हूं, और जब उपयोगकर्ता अब नहीं चलता है तब आगे बढ़ना।
क्रोम में सब कुछ अच्छी तरह से काम करता है, लेकिन फ़ायरफ़ॉक्स बुलबुले को रोकने से पहले उसे गड़बड़ करने का फैसला करता है। ऐसा लगता है कि यह पहले बुलबुला एनीमेशन को रीसेट कर रहा है, रुकने से पहले।
यहाँ है JSFiddle
एकमात्र कोड जिसे मैं इसे रोकने के लिए उपयोग करता हूं वह यह है:
// Set the hover and hoverOut
jQuery(".bubble").hover(function () {
// Pause the CSS animation
jQuery(this).css("-webkit-animation-play-state", "paused")
.css("animation-play-state", "paused");
}, function () {
jQuery(this).delay(1000).queue(function (next) {
// Run the animation again after a delay
jQuery(this).css("-webkit-animation-play-state", "running")
.css("animation-play-state", "running")
.css({zIndex: jQuery(this).data("oldZindex")
});
next();
});
});
क्या किसी को पता है कि मैंने क्या गलत किया या मैंने क्या देखा?
उत्तर:
उत्तर № 1 के लिए 1हटाए transitions अपने से bubble CSS यह आपके एनीमेशन को ओवरराइड करता है और अपनी प्रारंभिक स्थिति से शुरू होता है फिर से यह प्रयास करें,
सीएसएस
div.liljon div#bubbles .bubble {
overflow: hidden;
position: absolute;
opacity: 0;
display: none;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.4);
/** your remaining background and other properties here */;
}
इसका भी प्रयोग करें key-value pair object में jquery.css () पसंद,
// Set the hover and hoverOut
jQuery(".bubble").hover(function () {
// Pause the CSS animation
jQuery(this).css({"-webkit-animation-play-state": "paused",
"animation-play-state": "paused"});
}, function () {
jQuery(this).delay(1000).queue(function (next) {
// Run the animation again after a delay
jQuery(this).css({"-webkit-animation-play-state": "running",
"animation-play-state":"running",
zIndex: jQuery(this).data("oldZindex")
});
next();
});
});