2013-05-14 89 views
3

我使用AnimationEnd來觸發添加新類。它在Chrome中正常工作,但其他瀏覽器沒有響應。我不知道爲什麼。動畫結束不起作用

JS

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.background-image').on('webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd', function() { 
      $(this).addClass('visible'); 
     }); 
    }); 

</script> 

CSS

@-webkit-keyframes fade-in { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@-moz-keyframes fade-in { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@-ms-keyframes fade-in { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@-o-keyframes fade-in { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@keyframes fade-in { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 

.background-image { 
    background: url('images/bg.jpg') no-repeat center center fixed; 

    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 

    opacity: 0; 

    -webkit-animation-name: fade-in; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-timing-function: ease-in; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-delay: 3s; 

    -moz-animation-name: fade-in; 
    -moz-animation-duration: 1s; 
    -moz-animation-timing-function: ease-in; 
    -moz-animation-iteration-count: 1; 
    -moz-animation-delay: 3s; 
} 

.background-image.visible { 
    opacity: 1; 
} 

回答

6

它看起來就像是絆倒mozAnimationEnd。嘗試此,我在Firefox測試了它:

jsFiddle

$(document).ready(function() { 
    $('.background-image').on('animationend webkitAnimationEnd oAnimationEnd', function() { 
     $(this).addClass('visible'); 
    }); 
}); 
+0

此外 - IE 10不使用MS前綴CSS3。他們使用沒有前綴的標準名稱。只是擡起頭來 –

+0

@better_use_mkstemp謝謝我忘記了這一點,MS以後總是很痛苦...... – apaul