Emily Emily - 3 months ago 23
CSS Question

Delay in jquery animate with if condition

I'm trying to make a simple slider with 3 images and 3 bullets. My problem is that when I use jquery .animate to go to the next bullet, the first time it works correctly but the second time shows me in the first position with delay, which makes jquery .animate be delayed in other bullets.
My code in JSFiddle https://jsfiddle.net/Lqpj7sx1/

My code in StackOverflow snippet:



$(document).ready(function(){


//Encuentro la cantidad de imagenes
var cantImagenes = $('#imagenes img').length;


//Genero los bullets de acuerdo a la cantidad de imagenes
for(var i = 0; i < cantImagenes; i++)
{
$("#bullets").append("<span class='bullet' id=" + i + "></span>");
$('#bullets #0').addClass("seleccion");
var cantBullet = $("span.bullet").length;
}

var currentBullet = 0;

function animacion(){

$("#texto3").slideDown(4000, function(){
$("#texto3").css("display", "none")
$("#texto2").slideDown(4000, function(){
$("#texto2").css("display", "none")
$("#texto1").slideDown(4000, function(){
$("#texto1").css("display", "none")

})})});

for(i = 0; i < cantBullet; i++)
{
$("#bullets").animate({"left": "+=600px"}, 4000, function(){
$("#bullets #"+currentBullet).removeClass("seleccion");
currentBullet = currentBullet + 1;
$("#bullets #"+currentBullet).addClass("seleccion");
if(currentBullet > cantBullet){
currentBullet = 0;
$("#bullets #"+currentBullet).addClass("seleccion");
}
});
}

$("#foto3").animate({"left": "+=600px"}, 4000, function(){
$("#foto2").animate({"left": "+=600px"}, 4000, function(){
$("#foto1").animate({"left": "+=600px"}, 4000, function(){
$("#foto3").css("left", "0")
$("#foto2").css("left", "0")
$("#foto1").css("left", "0")

animacion();
})})});

}


animacion();




});

#imagenes{
width: 600px;
height: 450px;
border: 1px solid grey;
position: relative;
overflow: hidden;
background-image: url(http://1u88jj3r4db2x4txp44yqfj1.wpengine.netdna-cdn.com/wp-content/uploads/2014/05/big-data-600x450.jpg)
}
#foto1, #foto2, #foto3{
display: block;
position: absolute;
}
#texto1, #texto2, #texto3{
display: none;
position: absolute;
text-align: center;
width: 600px;
height: 30px;
padding-top: 10px;
vertical-align: bottom;
background-color: #000000;
color: #FFFFFF;
opacity: 0.3;
filter: alpha(opacity=30);
}
.bullet
{
width: 20px;
height: 20px;
border:3px solid #000;
margin-right: 10px;
display: inline-block;

}
.seleccion
{
background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h2>Slider</h2>
<div id="imagenes">
<img src="https://www.koi-nya.net/img/subidos_posts/2016/08/PS4-Slim_08-21-16_006-600x450.jpg" id="foto1" />
<img src="https://www.euroresidentes.com/estilo-de-vida/moda-estilo/wp-content/uploads/sites/15/2014/09/collage-leggings.jpg" id="foto2" />
<img src="http://1u88jj3r4db2x4txp44yqfj1.wpengine.netdna-cdn.com/wp-content/uploads/2014/05/big-data-600x450.jpg" id="foto3" />
<div id="texto1">Picture 1</div>
<div id="texto2">Picture 2</div>
<div id="texto3">Picture 3</div>
</div>
<div id="bullets"></div>





My problem is specifically in these lines:

for(i = 0; i < cantBullet; i++)
{
$("#bullets").animate({"left": "+=600px"}, 4000, function(){
$("#bullets #"+currentBullet).removeClass("seleccion");
currentBullet = currentBullet + 1;
$("#bullets #"+currentBullet).addClass("seleccion");
if(currentBullet > cantBullet){
currentBullet = 0;
$("#bullets #"+currentBullet).addClass("seleccion");
}
});
}


I hope someone can help me! Thank you!

Answer

Check this [https://jsfiddle.net/8hoo7tc9/] Actually for loop was not properly set

  [1]: https://jsfiddle.net/8hoo7tc9/
Comments