Marquee direction 'up' will always pause for at least 2 seconds on the first item

yakapo commented 9 years ago

When I use the direction 'up' I noticed that everytime the first item is scrolling upwards the scrolling will pause for at least 1-2 seconds and it happens on the succeeding loops. I tried this on IE, Firefox and chrome and the behavior is the same.

Here is my sample html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html >
        <head>
            <title>News Ticker Demo</title>
            <style type="text/css">      
                BODY {BACKGROUND-COLOR: #FFF; COLOR: #000;margin:0;padding:0;font-family:Arial, Helvetica, sans-serif;font-size:0.75em;}
                #NewsTickerItems{border:1px solid black;padding:1px;}

                .latestnews .NewsItem{margin-top:30px;margin-left:10px;}
                .latestnews #NewsTickerItems {height: 105px;overflow: hidden;margin-top:10px;}
                .latestnews{padding-left:15px;padding-right:15px;}
            </style>
            <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
            <script type="text/javascript" src="js/jquery.marquee.js"></script>                        
        </head>
        <body>
            <div class="latestnews">
                <div id='NewsTickerItems'>
                    <div class="NewsItem">
                        <b>10/10/2014</b> 
                        Lorem Ipsum is simply dummy text
                    </div>
                    <div class="NewsItem">
                        <b>10/10/2014</b> 
                        Lorem Ipsum is simply dummy text
                    </div>
                    <div class="NewsItem">
                        <b>10/10/2014</b> 
                        Lorem Ipsum is simply dummy text
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <script type="text/javascript">
                $(document).ready(function () {
                    $('#NewsTickerItems').marquee({
                        //speed in milliseconds of the marquee
                        speed: 4000,
                        //gap in pixels between the tickers
                        delayBeforeStart: 0,
                        //'left' or 'right' or 'up' or 'down'
                        direction: 'up',
                        //true or false - should the marquee be duplicated to show an effect of continues flow
                        duplicated: false,
                        //on hover pause the marquee
                        pauseOnHover: true
                    });
                });
            </script>
        </body>
    </html>

thephantom commented 9 years ago

is there already an solution?

steveganz commented 9 years ago

For some reason, the js-marquee-wrapper container has a margin-top value that is equal to the calculated height of the marquee container. This creates what you describe as a pause.

To prevent this, I use the following calculation for delayBeforeStart:

delayBeforeStart = 0 - duration

aamirafridi / jQuery.Marquee

Marquee direction 'up' will always pause for at least 2 seconds on the first item #35