CODEWITHSUNDEEP
jquery
danyo
danyo

Reputation: 5846

jquery animate, restart after last action (loop animation)

I am currently building a jquery slider. How would I go about getting to run on a continuous loop? I have followed this post, which didn't seem to work either. Can someone point me in the right direction please?

Here is my code and JSFiddle:

<style>
img {
    position:absolute;
    top:0px;
    left:0px;
}
#img {
    width:652px;
    height:314px;
    position:absolute;
    top:0px;
    right:0px;
    z-index:999999;
}
#img1 {
    width:652px;
    height:314px;
    position:absolute;
    top:0px;
    right:0px;
    z-index:999;
}
#img2 {
    width:652px;
    height:314px;
    position:absolute;
    top:0px;
    right:0px;
    z-index:99;
}
#content {
    height:350px;
    width:652px;
    position: relative
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<div id="content">
  <div id="img1" style="background:url(scarf01.jpg);"></div>
  <div id="img2" style="background:url(scarf02.jpg);"></div>
</div>
<script>
$(document).ready(function () {

    $('#img1').delay(2000).animate(
            {"width": "0px"},
            1000);

    $('#img2').delay(4000).animate(
            {"width": "0px"},
            1000, function() {


  });


});
</script>

Upvotes: 0

Views: 513

Answers (4)

Abraham Uribe
Abraham Uribe

Reputation: 3118

you can do 

play($('.im:first'));
function play(ele){
ele.delay(2000).animate(
        {"width": "0px"},
    1000,function(){
        var fi=$('.im:first').css("z-index");
        var li=$('.im:last').css("z-index");
        var ne=$(this).next(".im");
        ne.css({"z-index":fi});
        $("#content").append(this);
        $(this).css({"width":"652px","z-index":li});
        play(ne);
   });
}

http://jsfiddle.net/zHxcw/16/ adding a class to all the elements to animate
UPDATE 

play($('.im:first'));
function play(ele){
ele.delay(2000).animate(
        {"width": "0px"},
    1000,function(){
        var ne=$(this).next(".im");
        $("#content").append(this);
        pos();
        $(this).css({"width":"652px"});         
        play(ne);
 });
}
function pos(){
    var maxz=999;
    $(".im").each(function(){
        $(this).css({"z-index":maxz});
        maxz--;
    });
}

http://jsfiddle.net/zHxcw/25/ more images

Upvotes: 1

mauteri
mauteri

Reputation: 531

This will keep it continuous:

function animateThis() {
  $('#img1').delay(2000).animate(
     {"width": "0px"},
    1000, function() {
        $('#img2').css('z-index', '100');
        $('#img1').width(652).css('z-index', '99')
    });

$('#img2').delay(4000).animate(
    {"width": "0px"},
    1000, function() {  
        $('#img1').css('z-index', '100');
        $('#img2').width(652).css('z-index', '99'); 
        animateThis();
    });
}
$(document).ready(function () {
   animateThis();
});

Upvotes: 2

Badr Hari
Badr Hari

Reputation: 8384

http://jsfiddle.net/48yWZ/

Try something like this maybe?

loopz(); //on load 

function loopz() {

    $('#img1').delay(2000).animate(
            {"width": "0px"},
            1000, function() {  
  });   

    $('#img2').delay(4000).animate(
            {"width": "0px"},
            1000, function() {
    $('#img1').css("width", "652px");
   $('#img2').css("width", "652px");
loopz();

  });

}

Upvotes: 1

putvande
putvande

Reputation: 15213

Add your animations in a function that you have to recall after your last animation has finished.

<script>
    $(document).ready(function () {
        runIt();
    });

    function runIt(){
        $('#img1').delay(2000).animate(
            {"width": "0px"},
            1000);

        $('#img2').delay(4000).animate(
            {"width": "0px"},
            1000, runIt);
    }
</script>

Upvotes: 1

Related Questions