1

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

我有以下代码，它“有点”工作......我的代码在第一次点击时看起来没问题，但第二次，面板在查看之前先隐藏。

因此，为了简化我正在寻找的内容，假设您有 2 个 div 400x600，并且默认情况下您正在查看 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;
});

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

4

2 回答 2

1

我认为问题在于你总是在动画.home之后跟着.member_home，而实际上并非一直如此。When .homeis off-screen，您想先.member-home在屏幕外设置动画，然后再在屏幕内设置动画.home。您看到的效果是因为div无论哪个在屏幕外，您总是以相同的顺序为 s 设置动画。

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

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/。

于 2010-12-22T17:00:34.653 回答
0

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

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;
});
于 2010-12-22T16:36:26.863 回答