css - How to change <li> position after animation using jquery? -
i have jquery image slider set move images -100% left.
when image gets left:-100%; there way have move beginning of cycle?
<div id="homeslider" class="firefly_slider_wrapper"> <div class="firefly_slider"> <ul id="ffslider"> <li class="slide"> <div class="slideplacment"> <img src="" name="0" /> </div> </li> <li class="slide"> <div class="slideplacment"> <img src="" name="1" /> </div> </li> </ul> </div> </div>
the script looks this:
jquery(window).load(function(){ var tl2 = new timelinemax({oncomplete: updateposition}); var imgarray = []; var imglength = 0; var photocontwidth = 0; var imgwidth = 0; n = jquery("#ffslider li").length; function setdefaults(){ imglength = jquery('#ffslider li').length; photocontwidth = (imglength * 100) + '%'; for(var i=0; i<imglength; i++){ jquery('#ffslider li').eq(i).attr('name',i); jquery('#ffslider li').eq(i).css('left', (i * 100) + "%"); imgarray.push(jquery('#ffslider li').eq(i)); } startanimation(); }; function startanimation(){ tl2.to(imgarray, 1, {left:'-=100' + '%', delay:3}); } function updateposition(){ for(var i=0; i<imglength; i++){ if((imgarray[i].css('left') <= -100 + '%')){ imgarray[i].css("left", (n - 1) * '100' + '%'); } } startanimation(); } setdefaults(); });
its dynamic , used in wordpress theme.
the .animate()
function has callback method can use. here's quick example
html
<div></div>
css
div { width: 100px; height: 100px; background-color: red; position: absolute; left: 0; }
jquery
$("div").click(function() { $(this).animate({left: '-100%'}, 1000, function() { alert('move left animation finished...'); $(this).css({left: 0}); }); });
Comments
Post a Comment