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});     }); }); 

jsfiddle

http://jsfiddle.net/7bvz4/1/


Comments

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -