javascript - div 滑块反向

Question

这是 divslider 示例的链接：http: //jsfiddle.net/jtbowden/ykbgT/light/

但是在这个例子中，div是从右向左移动的

但我现在想将 div 从左移到右.. 这个网站里面已经有一个编辑器。所以请帮我反向移动div。因为在我的代码上我想去两边

$('.box').click(function() {
    $('.box').each(function() {
        if ($(this).offset().left < 0) {
            $(this).css("left", "150%");
        } else if ($(this).offset().left > $('#container').width()) {
            $(this).animate({
                left: '50%',
            }, 500 );
        } else {
            $(this).animate({
                left: '-150%',
            }, 500 );
        }
    });
});​

Answer 1

这是对我的 JS Fiddle 有用的方法：

$('.box').click(function() {
    $('.box').each(function() {
        if ($(this).offset().left < 0) {
           $(this).animate({
                left: '50%',
            }, 500 );
        } else if ($(this).offset().left > $('#container').width()) {
            $(this).css({
                'left': '-150%',
            } );
        } else {
            $(this).animate({
                left: '150%',
            }, 500 );
        }
    });
});​

Answer 2

你是这个意思吗？

#box1 {
    background-color: green;
    left: 150%; /* changed this */
}
#box3 {
    background-color: red;
    left: -150%; /* changed this */
}
​

和

$('.box').click(function() {
    $('.box').each(function() {
        if ($(this).offset().left > $('#container').width()) {
            $(this).css("left", "-150%");
        } else if ($(this).offset().left < 0) {
            $(this).animate({left:'50%'},500);
        } else {
            $(this).animate({left:'150%'},500);
        }
    });
});​