jQuery.Marquee
jQuery.Marquee copied to clipboard
aamirafridi
Marquee direction 'up' will always pause for at least 2 seconds on the first item
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>
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
