javascript - 在 Firefox 中使用 Jquery 故障暂停 CSS 动画

Question

我有几个随 CSS 动画 float 的气泡 div。使用 jQuery，我想在悬停时停止动画，并在用户不再悬停时继续。

在 Chrome 中一切正常，但 Firefox 决定在暂停气泡之前对其进行故障处理。看起来它在暂停之前先重置气泡动画。

这是 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();
    });
});

有谁知道我做错了什么或忽略了什么？

Answer 1

从你的 bubble CSS 中删除 transitions 它会覆盖你的动画并从它的初始位置再次开始尝试这个，

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 */;
}

同时在 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();
    });
});

Live Demo