After creating a basic animation of a balloon moving from bottom to top, I encountered an issue. The first loop works smoothly, but then the movement becomes random. Ideally, I want balloons to ascend consecutively without any erratic behavior, and continue in this pattern.
<div id="parent">
<div class="message">1. Bob</div>
<div class="message">2. Alice</div>
<div class="message">3. Eve</div>
</div>
jQuery.fn.verticalMarquee = function(vertSpeed, horiSpeed, index) {
this.css('float', 'left');
vertSpeed = vertSpeed || 1;
horiSpeed = 1/horiSpeed || 1;
var windowH = this.parent().height(),
thisH = this.height(),
parentW = (this.parent().width() - this.width()) / 2,
rand = Math.random() * (index * 1000),
current = this;
this.css('margin-top', windowH + thisH);
this.parent().css('overflow', 'hidden');
setInterval(function() {
current.css({
marginTop: function(n, v) {
return parseFloat(v) - vertSpeed;
},
marginLeft: function(n, v) {
//return (Math.sin(new Date().getTime() / (horiSpeed * 5000) + 1000) + 1) * parentW;
return (Math.pow(new Date().getTime() / ( 5000) + 1000) + 1);
}
});
}, 15);
setInterval(function() {
if (parseFloat(current.css('margin-top')) < -thisH) {
current.css('margin-top', windowH + thisH);
}
}, 250);
};
var message = 1;
$('.message').each(function(message) {
$(this).verticalMarquee(0.5, 0.5, message);
message++
});
parent {
left: 0;
top: 0;
width: 400px;
height: 100%;
}
.message,.message-1 {
height: 120px;
width: 120px;
background-color: orange;
color: white;
z-index: -9999;
line-height: 115px;
text-align: center;
font-family: Arial, sans-serif;
font-weight: bold;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
}
Fiddle: https://jsfiddle.net/znrhkf3c/12/
Your assistance on this matter would be greatly appreciated.