为html中的文本部分设置动画（jquery）答案

【问题标题】：animate part of text in html (jquery)为html中的文本部分设置动画（jquery）
【发布时间】：2015-04-17 05:30:18
【问题描述】：

目标很简单 ->

说我有一句话：

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

我希望“特殊”这个词被动画化（小反弹）。

这是我尝试过的（我正在使用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>

我希望整个句子在同一行，所以我添加了“显示：内联”部分。

这在 chrome 中运行良好，但在 safari 中“特殊”这个词根本不会反弹。

如果我删除“特殊”一词上的display: inline 部分，那么它在 chrome 和 safari 中都可以正常工作。（但句子不会在同一行了）

所以看起来像代码：

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

我在 safari 中找不到具有其他样式的 h3 元素（在本例中为显示：内联）？

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

【问题讨论】：

你试过<h3>This is a <span class="xxxxx_bounce">special</span> day for me </h3>
您可以为我们创建一个jsfiddle.net 吗？

标签： javascript jquery css animate.css impress.js

【解决方案1】：

尝试使用 inline-block 代替 inline。

【讨论】：