为html中的文本动画部分（jquery）

Question

目标很简单->

说我有一个句子：

“对我来说这是特别的一天……”

我希望对“特殊”一词进行动画处理（反弹）。

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

我希望整个句子在同一行上，因此我添加了“ display：inline”部分。

这在Chrome浏览器中效果很好，但在野生动物园中，“特殊”一词根本不会启动。

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

所以看起来像代码：

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

我在Safari中找不到具有其他样式的h3元素（在这种情况下为display：inline）？

有什么更好的方法可以做到这一点？

Answer 1

尝试使用inline-block而不是inline。

为html中的文本动画部分（jquery）

问题描述

1 个解决方案

解决方案1
0 2015-04-17 05:42:51

为html中的文本动画部分（jquery）

问题描述

1 个解决方案

解决方案1 0 2015-04-17 05:42:51

解决方案1
0 2015-04-17 05:42:51