Question

Please see this fiddle and click “decrease”:

http://jsfiddle.net/2C8fy/16/

As you can see the images sort of bounce to the right. The increase function button works exactly as it should. I know the problem lies in this function and I have pin pointed it specifically with notes:

 function slide_img_right() {

    var imgs = imgArr.length;
    a--;
    if (a < 0) {
        a = imgs - 1;
    }

    b = a - 1;
    c = a + 1;

    if (b < 0) {
        b = imgs - 1;
    }
    if (c >= imgs) {
        c = 0;
    }

    var left = $('#left_slot');
    var middle = $('#middle_slot');
    var right = $('#right_slot');
    var newImgSR = imgArr[a].clone();

    $('#basic_div').animate({
        left: '+=40px'      // This part is causing the bounce
    }, 300, function() {

    });


    left.attr('id', 'middle_slot');
    middle.attr('id', 'right_slot');


    (newImgSR).insertBefore("#middle_slot");
    newImgSR.attr('id', 'left_slot');
    newImgSR.css('opacity','0');
    newImgSR.fadeTo(300, 1);


    right.animate({
        opacity: 0
    }, 300, function() {
        right.remove();
        $('#basic_div').css({
            left: '0px'               //This part is causing the bounce back.
        });
    });
}

I just don’t know how to fix it. I have tried changing the width instead of the left, and I have also tried changing the order in which things occur in the function, but what can I do to get that thing to work like the increase button only in the opposite direction? Thanks!

Answer 1

$('#basic_div').css("left","-40px"); //Add this line here.

        $('#basic_div').animate({
            left: '+=40px'      // This part is causing the bounce
        }, 300, function() {

        });

see updated fiddle: http://jsfiddle.net/2C8fy/19/

To see why take a look at:

http://jsfiddle.net/2C8fy/20/ Here, you can see that in order to slide that image into view, it has to be outside of your current viewing area.