在Firefox中使用Jquery故障暫停CSS動畫

我有一些浮動CSS動畫的泡泡div。有了jQuery，我想停止動畫時懸停，並繼續當用戶不再徘徊。在Firefox中使用Jquery故障暫停CSS動畫

在Chrome中一切都很好用，但Firefox決定暫停之前泡泡。它看起來像是在暫停之前首先重置泡泡動畫。

，我用它來暫停唯一的代碼是這樣的：

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

有誰知道我做錯了什麼或者我俯瞰什麼？

來源

2014-02-12 Rewdeh

對mozilla使用-moz-animation-play-state –

你說得對，但是它沒有它。暫停按預期工作，只是泡泡在暫停之前移動，然後在暫停時恢復。這是一個奇怪的故障，鉻不顯示。 – Rewdeh

**更新：**我似乎也能夠在Chrome中複製這一點，通過刪除保持泡泡上的動畫的類（x1，x2或x3）。我不知道如何在Firefox中阻止它，但似乎像Firefox在懸停時完全移除動畫。即使我沒有用上面的代碼暫停它，只是改變了泡泡的大小。 – Rewdeh

取出transitions從bubble CSS它會覆蓋你的動畫，並從初始位置再次嘗試這個開始，

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()像使用key-value pair object，

// 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

來源

2014-03-22 08:45:46

這是什麼修復了我，謝謝！ :) – Rewdeh

在Firefox中使用Jquery故障暫停CSS動畫

回答

相關問題