带有切换的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 动画化。您看到的效果是因为您总是在同一空间内为divs 设置动画顺序，无论哪个在屏幕外。

这是一个添加逻辑的函数，可以解决这个问题：

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