0
Hello.
I need a script that generates an element span at the 20% start or end of the screen. Then this element needs to have an animation up to the top of the screen giving fadeout.
My difficulty is in making the individual animation of the elements.
The total animation time from creation to the top is 4 seconds. Everything normally occurs 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 having finished. The first element returns to its initial position and restarts the animation.
Any help on how to resolve this situation I thank.
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>
<button id="teste">
Clique aqui
</button>
</body>
Dude your mistake is that you’re using the class. test to set a bottom, then every element you create you put a bottom, you can put a Count in the class as it does with the id you must solve!
$(".teste").css('bottom', progress * 80 + '%');this puts bottom to all . test that appears, including what was already excited that returns to have the bottom– hugocsl
I confess that I read the question about 5 times and I could not understand where you are going as a result :D
– Sam
Do you want to create an effect of balls rising in random positions on the X axis? Maybe it would be interesting to delete javascript and make the animation only with CSS
– Leandro Angelo