JS淡入元素（Moz问题）

我有两个动画使用JS来激活一些CSS动画。似乎在Chrome和Safari中工作正常，但不是Moz。我还没有在IE中测试过（因为我在MBP上），但肯定也是borken。不知道为什么。JS淡入元素（Moz问题）

JS：

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

CSS：

`@-webkit-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; 
    } 

    .background-image.visible { 
     opacity: 1; 
    } 
#countries{ 
    width: 800px; 
    height: 300px; 
    position: absolute; 
    background: rgb(0, 0, 0); /* Fall-back for browsers that don't support rgba */ 
    background: rgba(0, 0, 0, .9); 
    left: 100px; 
    top: 80px; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 

    opacity: 0; 

     -webkit-animation-name: fade-in; 
     -webkit-animation-duration: .8s; 
     -webkit-animation-timing-function: ease-in; 
     -webkit-animation-iteration-count: .8; 
     -webkit-animation-delay: 4.5s; 
} 
#countries.visible { 
    opacity: 1; 
}

来源

2013-05-03 Packy

在哪里你'-moz'前缀关键帧的规则？ – Adrift 2013-05-03 16:51:22

你能分享'html片段'吗？ – Luis 2013-05-03 16:55:28

您只能使用一个'$（document）.ready'并包装这两个处理程序。 – cortex 2013-05-03 16:56:29

问题是您仅使用供应商特定的动画属性（webkit）。 Webkit是Chrome和Safari的浏览器引擎，所以这就是它的原因。

使用CSS属性和供应商特定的人（怎么看和浏览器支持）：https://developer.mozilla.org/en-US/docs/CSS/animation

来源

2013-05-03 17:01:00 cortex

所以我添加了其他浏览器动画CSS文件（完全隔开）和淡入工作，但JS没有添加Moz版本可见的类。我将这添加到JS $（document）.ready（function（）{$（'。background-image'）。 }）;}）; – Packy 2013-05-03 18:13:58

如果使用jQuery's Animate方法从开始到结束，其所有的影响（是的，它甚至还带有显示和隐藏物品的能力），你将在浏览器中拥有更健康的方法。 API页面上的示例。

来源

2013-05-03 16:43:56 blackhawk

如果@Packy想要CSS3动画的好处，那么[jQuery的动画增强]（http://playground.benbarnett.net/jquery-animate-enhanced/）插件允许您使用标准的jQuery'.animate（）'函数，并将动画转换为兼容的CSS3。 – Simon27 2013-05-03 17:02:25

JS淡入元素（Moz问题）

回答

相关问题