0

目标很简单->

说我有一句话:

“这对我来说是一个特殊的日子……”

我希望“特别”这个词被动画化(小反弹)。

这就是我尝试过的(我正在使用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具有其他样式的元素(在这种情况下为显示:内联)?

有没有更好的方法来完成这项工作?

4

1 回答 1

0

尝试内联块而不是内联。

于 2015-04-17T05:42:51.960 回答