CODEWITHSUNDEEP
jqueryhtmlcss
Aviel Gross
Aviel Gross

Reputation: 9965

Fade in/out (in Jquery) text changes position on page

I did a fading text with quotes on my website, with total of 4 labels. For some weird reason the 2 later labels are not at the same position as the 2 first labels. As the labels fade out and in I can see that in the change from the 2nd label to the 3rd label there is a jump in the position of the text on the page, and it also pushes the entire rest of the page down (it's about 10-20px moevement).

What I tried:

This is the CSS:

        .quotes {
        display: none;
        text-align: center;
        font-family: 'Alef Hebrew', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        color: #999999;
    }

This is the JS (jQuery...):

        $(function() {

        var quotes = $(".quotes");
        var quoteIndex = -1;

        function showNextQuote() {
            ++quoteIndex;
            quotes.eq(quoteIndex % quotes.length)
                    .fadeIn(800)
                    .delay(800)
                    .fadeOut(800, showNextQuote);
        }

        showNextQuote();
    })();

This is the HTML part:

    <h1 class="quotes">text1</h1>
    <h1 class="quotes">text2</h1>​
    <h1 class="quotes">text3</h1>
    <h1 class="quotes">text4</h1>

This is the page structure:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=false;">
    <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,200' rel='stylesheet' type='text/css'>
    <title>...</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(function() {

        var quotes = $(".quotes");
        var quoteIndex = -1;

        function showNextQuote() {
            ++quoteIndex;
            quotes.eq(quoteIndex % quotes.length)
                    .fadeIn(800)
                    .delay(800)
                    .fadeOut(800, showNextQuote);
        }

        showNextQuote();
    })();
</script>
<style>
    @import url(http://fonts.googleapis.com/earlyaccess/alefhebrew.css);

    .quotes {
        display: none;
        text-align: center;
        font-family: 'Alef Hebrew', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        color: #999999;
    }

    /*#quotes-block {*/
        /*height: 100px;*/
        /*width: 100%;*/
        /*background-color: #bb5ef2;*/
    /*}*/
.
.
.
.
    @media (width: 640px), (width:320px) {...}
</style>
</head>
<body>
<header>
    <img src="logo.png">
</header>
<!--<div id="quotes-block">-->
    <h1 class="quotes">text1</h1>
    <h1 class="quotes">text2</h1>​
    <h1 class="quotes">text3</h1>
    <h1 class="quotes">text4</h1>
<!--</div>-->

<img class ="circle" src="circle.png">
<div id="block">...</div>
<img class ="circle" src="circle.png">
<footer>...</footer>

Also, I used the jQuery code from the answer here

Upvotes: 1

Views: 2596

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

You have a special character (some sort of bullet point) after the closing tag </h1> of the text2 line.

enter image description here

if you remove it, it will work just fine..

See http://jsfiddle.net/FbmwD/

Upvotes: 1

Related Questions