why this loop pass just one time and then sleep?!

[finalfantasy1st]

Please! … why the loop setInterval not working in this code,it pass just one time , no loop:

$(document).ready(function(){
    $('.ImageContainer').animate({opacity:'1'}, 1000, 'linear');
    function pseuido(){
        $('.psuedoAlternativeOne, .psuedoAlternativeTwo, .psuedoAlternativeThree, .psuedoAlternativeFour').css('backgroundImage','url(../images/3.jpg)');
    };
    function changeImage(){
        $('.one, .two, .three, .four').css('backgroundImage','url(../images/2.jpg)');
    pseuido();
    };
    function ImageAnimator(){
    $('.one, .three').css('animation','ToTopImageAnimator 0.65s 0s 1 linear backwards');
    $('.two, .four').css('animation','ToBottomImageAnimator 0.65s 0s 1 linear backwards');
    $(this).delay(660).queue(function(){
        changeImage();
    });

};
setInterval(ImageAnimator,7000);
}); 

[finalfantasy1st]

Thank you for your efforts, I’m trying to make a sliding image show,
the code still not complete yet.

HTML:

<div class="ImageContainer">
             <div class="Parts one">
             <div class="psuedoAlternativeOne"></div>
             </div>
             <div class="Parts two">
             <div class="psuedoAlternativeTwo"></div>
             </div>
             <div class="Parts three">
             <div class="psuedoAlternativeThree"></div>
             </div>
             <div class="Parts four">
              <div class="psuedoAlternativeFour"></div>
             </div>
            </div>

---

CSS:
 body{
     text-align: center;
 }

.ImageContainer{
    position:relative;
    margin-left: auto;
    margin-right: auto;
    width:600px;
    height: 400px;
    background-size: cover;
    z-index: 1000;
    overflow: hidden;
    border-radius: 1vw;
    opacity: 0;
}
.Parts{
    position: relative;
    float:left;
    background-image: url(../images/1.jpg);
    background-repeat: no-repeat;
    background-origin: padding-box;
    width:150px;
    height: 400px;

}
ul{
    list-style-type: none;
}

.one{

    background-position: 0;

}
.two{
    background-position:-150px;
}
.three{
    background-position: -300px;
}
.four{
    background-position: -450px;
}
.psuedoAlternativeOne{
    position:  relative;
    top:400px;
    left: 0;
    width:150px;
    height: 400px;
    background-image: url(../images/2.jpg);
    background-position:0px;
    background-repeat: no-repeat;
    background-origin: padding-box;
}
.psuedoAlternativeTwo{
    position:  relative;
    top:-400px;
    left: 0;
    width:150px;
    height: 400px;
    background-image: url(../images/2.jpg);
    background-position:-150px;
    background-repeat: no-repeat;
    background-origin: padding-box;
}
.psuedoAlternativeThree{
    position:  relative;
    top:400px;
    left: 0;
    width:150px;
    height: 400px;
    background-image: url(../images/2.jpg);
    background-position:-300px;
    background-repeat: no-repeat;
    background-origin: padding-box;
}
.psuedoAlternativeFour{
    position:  relative;
    top:-400px;
    left: 0;
    width:150px;
    height: 400px;
    background-image: url(../images/2.jpg);
    background-position:-450px;
    background-repeat: no-repeat;
    background-origin: padding-box;
}

@keyframes ToTopImageAnimator {
    0%{
        top: 0;
    }
    100%{
        top: -400px;
    }
}
@keyframes ToBottomImageAnimator {
    0%{
        top: 0;
    }
    100%{
        top: 400px;
    }

}

---

JS:
"Use Strict";
$(document).ready(function(){
    $('.ImageContainer').animate({opacity:'1'}, 1000, 'linear');
    function pseuido(){
        $('.psuedoAlternativeOne, .psuedoAlternativeTwo, .psuedoAlternativeThree, .psuedoAlternativeFour').css('backgroundImage','url(../images/3.jpg)');
    };
    function changeImage(){
        $('.one, .two, .three, .four').css('backgroundImage','url(../images/2.jpg)');
    pseuido();
    };
    function ImageAnimator(){
    $('.one, .three').css('animation','ToTopImageAnimator 0.65s 0s 1 linear backwards');
    $('.two, .four').css('animation','ToBottomImageAnimator 0.65s 0s 1 linear backwards');
    $(this).delay(660).queue(function(){
        changeImage();
    });

    };
    setInterval(ImageAnimator,7000);
});

4shared file:
http://www.4shared.com/get/4KLmVnLYba/Index.html

please see if you can find the wrong

[finalfantasy1st]

Oh, I solved the issue!

I must reset the animation function!

$(‘.one, .three’).css(‘animation’,’ToTopImageAnimator 0.65s 0s 1 linear backwards’);
$(‘.two, .four’).css(‘animation’,’ToBottomImageAnimator 0.65s 0s 1 linear backwards’);
$(this).delay(660).queue(function(){
changeImage();
$(‘.one, .three’).css(‘animation’,”);
$(‘.two, .four’).css(‘animation’,”);
$(this).dequeue();

[Author]

Posts