Question

嘿伙计......我正在努力产生一种效果，如果我点击一个按钮，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;
});

如果有人能在这里帮助我，那就太棒了！谢谢！

Answer 1

我认为问题在于，您总是在.home后面跟.member_home制作动画，但事实并非如此。如果屏幕上显示.home，您需要先在屏幕上设置.member-home动画，然后为.home设置动画。您看到的效果是因为您总是为{动画化{ {1}}以相同的顺序排列，无论哪个是屏幕外的。

这是一个添加逻辑的函数，可以修复：

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

在此处查看一个有效的示例：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;
});

jQuery幻灯片效果与切换？

2 个答案: