white space/gap issue while sliding in custom content slider

Question

I am trying to make a custom content slider.Almost there, but having a issue with background white while scrolling.

There is a gap or space created between each slider.

I have created a fiddle so that you can view the slider.

<ul id="slider">
    <li class="case_study" id="case_study1">Div Slide 1 <div class="right"></div></li>
    <li class="case_study" id="case_study2">Div Slide 2 <div class="right"></div></li>
    <li class="case_study" id="case_study3">Div Slide 3 <div class="right"></div></li>
</ul>

Demo : http://jsfiddle.net/squidraj/6S6KT/2/

Full Screen : http://jsfiddle.net/squidraj/6S6KT/2/embedded/result/

Please suggest.

Answer 1

$('#slider li.case_study:first-child').animate({
    left: '-100%'
}, 300, function () { // The command function is a **CALLBACK**
    $('#slider li.case_study:first-child').css('left', '100%');

Your code above does what it is meant to do - I have added a comment where you are using a callback.

A callback fires when the first item has finished - so at the moment your script moves the first div 100% to the left THEN it adds the second div to the screen and animates it to the left.

You want everything to happen in your .animate({},300) clause - as follows:

Append second div to the right of first div - then move both divs to the left at the same time.

Have a go - if you get stuck then post your new code - but see if you can work it out yourself - it will help you learn faster!