Question

当我点击链接时，我想在两个div 之间创建幻灯片。

我正在尝试这样的幻灯片：http://jsfiddle.net/jtbowden/ykbgT/2/

但这是一场灾难：http://jsfiddle.net/Xroad/SP5Rh/

$('.slide').click(function() {

    $('.green').animate({
        left: '-50%'
    }, 500, function() {
        $('.red').css('left', '150%');
        $('.red').appendTo('#container');
    });

    $('.green').next().animate({
        left: '50%'
    }, 500);
});

Answer 1

这应该解决它，我已经改变了一些数字，以修复你的盒子大小。

$('.slide').click(function() {

    $("#container div:first").animate({
        left: '-150%'
    }, 500, function() {
        $(this).css('left', '150%');
        $(this).appendTo('#container');
    });

    $('#container div:first').next().animate({
        left: '0'
    }, 500);
});

编辑：与工作相比，为什么你的工作没有？您仅为red或green设置了动画。另外，另一个人正在使用next()，但您的next()不能使用，因为Slide div锚点的{{1}}不是我们想要的。

两个div之间的水平滑动

1 个答案: