animate part of text in html (jquery)

Question

The goal is simple ->

Say I got a sentence:

"This is a special day for me ..."

And I want the word "Special" being animated (little bounce).

And here's what I tried (I'm using 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>

I want the whole sentence to be on the same line so I added the "display: inline" part.

This works fine in chrome but in safari the word "special" WON'T BOUNCE at all.

If I remove the display: inline part on the word "special", then it works fine in both chrome and safari. (but the sentence won't be on the same line anymore)

So it seems like the code:

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

I couldn't find the h3 element with additional style (display: inline in this case) in safari ?

Is there any way better to get this done ?

Have you tried `
This is a special day for me
` – Sagar Khatri Apr 17 '15 at 05:34 — Sagar Khatri, Apr 17 '15 at 05:34
Possible for you to create us a https://jsfiddle.net/ ? – R4nc1d Apr 17 '15 at 05:35 — R4nc1d, Apr 17 '15 at 05:35

score 0 · Answer 1 · answered Apr 17 '15 at 05:42

0

Try inline-block instead of inline.

answered Apr 17 '15 at 05:42

kWeglinski

411
4
14

animate part of text in html (jquery)

This is a special day for me

1 Answers1