隱藏和顯示DIV單擊

我重建從頭開始一個網站，我想知道我怎麼能設法做到這一點：隱藏和顯示DIV單擊

enter image description here

當我點擊這兩個按鈕中的一個有出現另一種觀點。我該如何做到這一點？

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

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

但它不工作，我想要的方式。我想要一個slideFromLeft，我想對齊按鈕和地圖。

來源

2014-12-04 Nicolas Charvoz

將按鈕點擊鏈接到某些js並更改元素的css類。然後申請一個CSS動畫。 – www139 2014-12-04 14:36:40

我會稍後發佈答案。我有學校要做... – www139 2014-12-04 14:36:56

我更新了你的提琴：

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

來源

2014-12-04 14:48:02 empiric

它可以工作，但我不知道爲什麼我的地圖顯示在按鈕下方？我複製/粘貼你的CSS和類..是否因爲圖像太大？ – 2014-12-04 15:06:51

即使在小提琴上也可以。謝謝你的一切！現在這是由我來調整圖像:) – 2014-12-04 15:09:09

不客氣，很高興我可以幫助你。 – empiric 2014-12-04 15:12:36

這樣的事情呢？

FIDDLE

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

來源

2014-12-04 14:40:00 Refilon

http://jsfiddle.net/rdesai/7bqjm1dy/6/ – 2014-12-04 14:43:11

完美的傢伙！非常感謝！ – 2014-12-04 14:43:43

但是，如果我想顯示默認的第一個視圖？ – 2014-12-04 14:45:03

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

來源

2014-12-04 14:54:52

隱藏和顯示DIV單擊

回答

相關問題