使用動畫功能顯示隱藏div

您好，我嘗試從頁面底部爲用戶單擊某些鏈接時動畫幾個div。使用動畫功能顯示隱藏div

E.g是一個鏈接，說'關於'被點擊，我需要該div從底部向上滑動到一定高度。但是如果另一個環節E.g.點擊「聯繫人」，我想讓聯繫人div從底部向上滑動，同時另一個div必須向下滑動。我已經開始學習jQuery，並沒有太多的知識..但是，這是我已經嘗試過..但不能達到它的目的。

Div在單擊時滑動，但在單擊另一個鏈接時滑動不下來。我只需要點擊的股利是在同一時間可見和休息所有div有要麼向下滑動或隱藏

<script> 
$(document).ready (function() { 
    $('#ab').click (function() { 
     $('#about').show().animate({marginTop:'-360px'}); 
    }); 
    $('#con').click (function() { 
     $('#contact').show().animate({marginTop:'-360px'}); 

    }); 
}); 
</script>

這裏是CSS

#about {width:auto; background-color:#333333; height:360px; position:relative; display:none;} 
#contact {width:auto; background-color:#FF3300; height:360px; position:relative; display:none;}

HTML放在這裏

<ul class="menu"> 
<li><a id="ab" href="#">About </a></li> 
<li><a id="con" href="#">Contact</a></li> 

</ul> 

<div class="maindiv"> 

<div id="about">About</div> 
<div id="contact">Contact</div> 
</div>

任何幫助是非常讚賞..謝謝

來源

2013-04-26 Gops

「不可能得到它的目的的方式。」請具體說明。運行代碼時會發生什麼不正確的事情？ – 2013-04-26 19:07:25

Div在單擊時滑動，但在單擊另一個鏈接時滑動不下來。我只需要點擊的div一次可見，並休息所有的div必須滑下或隱藏 – Gops 2013-04-26 19:10:06

請張貼HTML標記也.. .. – 2013-04-26 19:10:38

你可以這樣做：

$('#ab').click(function (e) { 
    e.preventDefault(); 
    $('#contact').slideUp(); 
    $('#about').slideDown(); 
}); 
$('#con').click(function (e) { 
    e.preventDefault(); 
    $('#about').slideUp(); 
    $('#contact').slideDown(); 
});

FIDDLE

來源

2013-04-26 19:24:49

帕拉什，感謝您的建議。如果我有6個鏈接和6個div，該怎麼辦？我是否需要爲所有人寫信。或者還有其他方式只顯示點擊的內容並隱藏其餘的內容 – Gops 2013-04-27 05:10:04

使用動畫功能顯示隱藏div

回答

相關問題