目标很简单->
说我有一句话:
“这对我来说是一个特殊的日子……”
我希望“特别”这个词被动画化(小反弹)。
这就是我尝试过的(我正在使用impress.js
+ animate.css
)。
索引.html:
<html>
<head>
...
</head>
<body class="impress-not-supported">
<div id="impress">
<div id="first_slider" class="step slide" data-x="-1000" data-y="-1500">
<h3 style="display: inline">This is a</h3> <h3 class="xxxxx_bounce" style="display: inline">special</h3> <h3 style="display: inline">day for me</h3>
</div>
</div>
<script src="js/impress.js"></script>
<script>
impress().init();
$('#first_slider').on('impress:stepenter', function() {
$(this).find("h3.xxxxx_bounce").addClass('animated bounce');
});
</script>
</body>
</html>
我希望整个句子在同一行,所以我添加了“显示:内联”部分。
这在 chrome 中运行良好,但在 safari 中“特殊”这个词根本不会反弹。
如果我删除display: inline
“特殊”一词上的部分,那么它在 chrome 和 safari 中都可以正常工作。(但句子将不再在同一行)
所以它看起来像代码:
$(this).find("h3.xxxxx_bounce")
我在 safari 中找不到h3
具有其他样式的元素(在这种情况下为显示:内联)?
有没有更好的方法来完成这项工作?