Question

目标很简单 - ＆gt;

说我有一句话：

＆＃34;对我来说这是一个特殊的日子......＆＃34;

我想要＆＃34;特别＆＃34;动画（小反弹）。

这就是我尝试的内容（我使用impress.js + animate.css）。

的index.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>

我希望整个句子在同一行，所以我添加了＆＃34; display：inline＆＃34;一部分。

这在Chrome中运行良好，但在safari中可以使用＆＃34; special＆＃34; WON＆＃39; T BOUNCE。

如果我删除单词＆＃34; special＆＃34;上的display: inline部分，那么它在chrome和safari中都能正常工作。（但句子不再是在同一条线上）

所以看起来像代码：

$(this).find("h3.xxxxx_bounce")

我无法在Safari中找到具有其他样式的h3元素（在这种情况下显示：内联）？

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

Answer 1

尝试使用内联块而不是内联。

在html（jquery）中动画部分文本

1 个答案: