单击按钮隐藏和显示div

Question

我正在从头开始重建网站，我想知道如何才能做到这一点：

当我点击其中一个按钮时，会出现另一个视图。 我怎样才能做到这一点？

我试过这个：http://jsfiddle.net/7bqjm1dy/

＆＃13;

＆＃13;

$("#b1").click(function() {
    $("#first").slideDown();
    $("#sec").slideUp();
});
$("#b2").click(function() {
    $("#sec").slideDown();
    $("#first").slideUp();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div style="vertical-align:top; display:inline;">
    <button id="b1">Click 1</button><br />
    <button id="b2" >Click 2</button>
</div>
<div>
    <div id="first" style="display:none; background-color:red; width:100px; height:200px;"></div>
    <div id="sec" style="display:none; background-color:blue; width:100px; height:200px;"></div>
    
</div>

＆＃13;

＆＃13;

＆＃13;

但它并没有按照我想要的方式运作。我想要一个slideFromLeft，我想对齐按钮和地图。

Answer 1

我更新了你的小提琴：

<强> HTML

<div style="vertical-align:top; display:inline;" class="buttons">
    <button id="b1">Click 1</button><br />
    <button id="b2" >Click 2</button>
</div>
<div class="boxes">
    <div id="first" style="background-color:red; width:100px; height:200px;"></div>
    <div id="sec" style="display: none; background-color:blue; width:0px; height:200px;"></div>    
</div>

<强>的Javascript

$("#b1").click(function() {
    $("#sec").animate({'width': 0}, 'fast', function(){ 
        $(this).hide(); 
        $("#first").show().animate({'width': '100px'});
    });        
});
$("#b2").click(function() {
    $("#first").animate({'width': 0}, 'fast', function(){ 
        $(this).hide(); 
        $("#sec").show().animate({'width': '100px'});
    });     
});

<强> CSS

.boxes, .buttons{
    float: left;
}

<强> DEMO

Answer 2

这样的事情怎么样？

<强> FIDDLE

$( "#b1" ).click(function() {
    $( "#first" ).animate({
        width: "100px",
    }, 1500 );
    $( "#sec" ).animate({
        width: "0px",
    }, 1500 );
});

Answer 3

将Deer-Outdoor.nl的答案与下面的DOM结构相结合，我想你现在有了答案。

<div style="vertical-align:top; display:inline;float:left;">
    <button id="b1">Click 1</button><br />
    <button id="b2" >Click 2</button>
</div>
<div style="float:left">
    <div id="first"></div>
    <div id="sec"></div>
</div>

看到那些div现在有float：left style属性。你也可以在第二个div上加上一些余量来创建它们之间的空格。

FIDDLE