Question

请看这个小提琴并点击“减少”：

正如您所看到的那样，图像反弹到右侧。增加功能按钮完全按预期工作。我知道问题出在这个函数上，我有针对它的特别注意：

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

我只是不知道如何解决它。我试过改变宽度而不是左边，我也尝试改变函数中出现的顺序，但是我能做些什么才能使这个东西像增加按钮一样只在相反的方向上工作？谢谢！

Answer 1

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

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

        });

请参阅更新的小提琴：http://jsfiddle.net/2C8fy/19/

要查看为什么看一下：

http://jsfiddle.net/2C8fy/20/在这里，您可以看到为了将图像滑入视图，它必须位于您当前的查看区域之外。

使用Jquery图像轮播进行不需要的弹跳图像

1 个答案: