Hello.
I need a script that manages a span element in the initial or final 20% of the screen. Then this element needs to have an animation to the top of the screen giving fadeout .
My difficulty is in doing the individual animation of the elements.
The total animation time from creation to the top is 4 seconds. Everything happens normally if I wait for the animation of one element to finish to start the next.
The problem is when I start the animation of the second element without the first one ending. The first element returns to the starting position and restarts the animation.
Any help on how to resolve this situation I appreciate.
let aux = 1;
let count = 0;
teste.onclick = function() {
var html = '<span id="dot'+count+'" class="teste"></span>'
$('body').append(html);
var width = $(document).width();
var height = $(document).height();
if(aux == 1){
var max = width * 0.20;
var min = 1;
} else {
var max = width;
var min = width * 0.8;
}
aux = aux * -1;
var x = Math.floor(Math.random()*(max - min + 1) + min);
$( "#dot"+count ).animate({
left: x,
bottom: '20px'
}, 0, function() {
});
animate({
duration:4000,
timing: function(timeFraction) {
return Math.pow(timeFraction, 5)
},
draw: function(progress) {
$(".teste").css('bottom', progress * 80 + '%');
}
});
$("#dot"+count).fadeOut(4500, function(){
$(this).remove();
})
count++;
}
function animate({timing, draw, duration}){
let start = performance.now();
requestAnimationFrame(function animate(time) {
// timeFraction goes from 0 to 1
let timeFraction = (time - start) / duration;
if (timeFraction > 1) timeFraction = 1;
// calculate the current animation state
let progress = timing(timeFraction)
draw(progress); // draw it
if (timeFraction < 1) {
requestAnimationFrame(animate);
}
});
}span {
height: 75px;
width: 75px;
border-style: solid;
border-radius: 50%;
display: inline-block;
position: fixed;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><body><buttonid="teste">
Clique aqui
</button>
</body>