javascript - Slide animation using jQuery only works in one direction -


http://jsfiddle.net/webk2/1/

i have group of block elements , i'm attaching slide animation on click. goal elements continue slide , forth smoothly.

<section class="stretch">     <div class="block blue"></div><div class="block red"></div><div class="block green"></div><div class="block orange"></div><div class="block silver"></div><div class="block teal"></div><div class="block salmon"></div> </section> <button class="button-left">left</button> <button class="button-right">right</button> 

and jquery:

function moveright() {         var lastblock = $(".stretch .block:last-child");         lastblock.remove();         $(".stretch .block:first-child").before(lastblock);         $(".stretch .block").each(function(){             $(this).css("left","0").css("right","0");             $(this).animate({"left": "+=250px"}, "5000");         });     };      function moveleft() {         var firstblock = $(".stretch .block:first-child");         firstblock.remove();         $(".stretch .block:last-child").after(firstblock);         $(".stretch .block").each(function(){             $(this).css("right","0").css("left","0");             $(this).animate({"right": "+=250px"}, "5000");         });     }; $(".button-right").click(function(){         moveleft();     });      $(".button-left").click(function(){         moveright();     }); 

the result i'm getting 1 of move functions sliding animate (moveright). can't see why won't animate moveleft function.

fiddle

change moveright() to

function moveright() {     if ($('.stretch .block:animated').length == 0) {         var lastblock = $(".stretch .block:last-child");         var cloned = lastblock.clone()         cloned.width(1);         $(".stretch .block:first-child").before(cloned);         cloned.animate({             'width': "250"         }, "5000", function () {             lastblock.remove()         });     } }; 

and moveleft() to

function moveleft() {     if ($('.stretch .block:animated').length == 0) {         var firstblock = $(".stretch .block:first-child");         var cloned = firstblock.clone()         cloned.width(250);         $(".stretch .block:last-child").after(cloned);         firstblock.animate({             'width': "0"         }, "5000", function () {             firstblock.remove()         });     } }; 

this achieves visual outcome @ least. clone necessary if don't have enough elements fill container 1 missing right hand side.

the check if of elements animated prevent multiple clones being made of same element.


Comments

Popular posts from this blog

How to remove text and logo OR add Overflow on Android ActionBar using AppCompat on API 8? -

html - How to style widget with post count different than without post count -

url rewriting - How to redirect a http POST with urlrewritefilter -