带有切换功能的 jQuery 幻灯片效果？

Question

嘿伙计们...我正在尝试产生一种效果，如果我单击按钮，则 1 个面板会滑到左侧，另一个面板会滑入视图。如果我再次单击，当前的会滑开，而之前的会像切换按钮一样滑回。

我有以下代码，它的工作原理“有点”...我的代码在第一次单击时看起来不错，但第二次单击时，面板在查看面板第一次隐藏之前重叠。

因此，为了简化我要寻找的内容，假设您有 2 个 400x600 的 div，默认情况下您正在查看 div 1，单击按钮时，div 1 向左滑出视图，div 2 也从左侧滑入div 1 隐藏后，再次单击时，div 2 向左滑动，div 1 也从左侧滑回……它会切换。

jQuery(".button").click(function() {
    var $lefty = jQuery(".home");
       $lefty.animate({
       left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0}, 

 function() {
    jQuery(".member_home").show();
    var $lefty = jQuery(".member_home");
       $lefty.animate({
       left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0
});

});
    return false;
});

如果有人可以在这里帮助我，那就太好了！谢谢！

Answer 1

我认为问题在于，您总是先对 .home 进行动画处理，然后对 .member_home 进行动画处理，但实际上情况并非总是如此。当 .home 离开屏幕时，您希望首先将 .member-home 动画移出屏幕，然后再将 .home 动画化。您看到的效果是因为您始终以相同的顺序对 div 进行动画处理，无论哪个在屏幕外。

这是一个添加逻辑来解决该问题的函数：

function toggleDivs() {
    var $home = $("#home");
    var $memberHome = $("#member-home");
    var $slideOut, $slideIn;

    // See which <divs> should be animated in/out.
    if ($home.position().left < 0) {
        $slideIn = $home;
        $slideOut = $memberHome;
    }
    else {
        $slideIn = $memberHome;
        $slideOut = $home;
    }

    $slideOut.animate({
        left: "-" + $slideOut.width() + "px"
    }, function() {
        $slideIn.animate({ left: "0px" });
    });
}

然后从按钮单击处理程序调用该函数：

$("button").bind("click", function() {
    toggleDivs();
});

在此处查看一个工作示例： http://jsfiddle.net/andrewwhitaker/qSvDz/。

Answer 2

将第二个面板的滑入设为回调函数。然后它不会滑入，直到第一个面板被隐藏。
编辑

jQuery(".button").click(function() {
    var $lefty = jQuery(".home");
       $lefty.animate({
       left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0}, 

 function() {
    jQuery(".member_home").show(400,function() {
        var $lefty = jQuery(".member_home");
           $lefty.animate({
           left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0
    });
});

});
    return false;
});