Question

我有一个页面正在使用jQuery导航按钮，当点击每个按钮时，应该将内容滑入视图。但是，当单击另一个按钮时，我需要在新内容滑入视图之前将当前查看的内容滑回视图之外。

这是我到目前为止所做的：

$("#rules-btn").click(function () {
    var effect = 'slide';
    var options = { direction: 'left' };
    var duration = 700;
    $('#rules-pane').toggle(effect, options, duration);
});

这是我的jsfiddle，它显示了它现在的行为方式。任何人都可以告诉我如何在单击另一个按钮时隐藏当前查看的内容？感谢。

顺便说一下，我对jQuery很新...

Answer 1

演示：http://jsfiddle.net/e6kaV/6/

HTML：

<div id="rules" class="pane-launcher"></div>
<div id="rules-pane" class="pane"></div>
<div id="scenarios" class="pane-launcher"></div>
<div id="scenarios-pane" class="pane"></div>

JS：

$(".pane-launcher").click(function () {
    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: 'left' };

    // Set the duration (default: 400 milliseconds)
    var duration = 700;
    $('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
});

CSS：

.pane-launcher{
    position:absolute;
    top: 0;
    width:20px;
    height:20px;
    background-color:#000;
    display:block;
}
#rules {
    left:0px;
}
#scenarios {
    left:40px;
}
.pane{
    position:absolute;    
    left: 0;
    height:50px;
    display:none;
    opacity:0.5;
}
#rules-pane {
    top:50px;
    width:200px;
    background-color:#999;
}

#scenarios-pane {
    top:60px;
    width:170px;
    background-color:#F00;
}

记住：不是处理大量的ID，最好使用类来添加样式和事件处理程序。

jQuery切换动画元素的可见性

1 个答案: