jquery滑動到位置點擊

我有一個專欄。在列中，我有多個div，每個div裏面都有文字。有點像類別列表。哪一個是SELECTED會獲得不同的背景顏色。

我想要做的就是使用jquery，以便在背景顏色上點擊不同的div時，它會滑動到其餘項目的後面，直到達到所選項目的其餘部分。

有沒有人有任何想法，如果這可以做到？如果有的話，關於Markup的任何想法？

任何幫助，非常感謝。

有將需要一個包裝，每個部件和東西，滑動的內容容器......

<div> 
    <div class='slider'></div> 
    <div>Content 1</div> 
    <div>Content 2</div> 
</div>

來源

2010-03-24 Andy

你可以發佈一些標記，我沒有看到你在做什麼。 – 2010-03-24 23:24:07

有趣的要求:)你可以用.animate()和CSS的一點點，這樣做：

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    </script> 
    <style type="text/css" > 
    #content div { width: 200px; z-index: 2; } 
    #content div.slider { position: absolute; background: #99AABB; z-index: -1; } 
    </style> 
</head> 
<body> 
<script language="javascript" type="text/javascript"> 
$(function(){ 
    $("#content div:not(.slider)").click(function() { 
    $(".slider").animate({ top: $(this).offset().top, height: $(this).height() }); 
    }); 
}); 
</script> 
    <div id="content"> 
    <div class='slider'></div> 
    <div>Content 1 Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test</div> 
    <div>Content 2<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test</div> 
    </div> 
</body> 
</html>

試一試:)只需點擊任一個div即可看到效果。 See a demo here

重要的位：

忽略在單擊處理.slider DIV
.animate()以相同的偏移/高度爲目的地的div
下z-index所以它顯示爲背景
你可以使用一個圖像，無論在CSS的.slider股利將工作

來源

2010-03-25 00:17:04

你的傳奇！那正是我之後的事情。非常感謝你。 – Andy 2010-03-25 07:56:19

有用的網站，以及你有你的演示。 – Andy 2010-03-25 07:56:47

@安迪 - 歡迎！這很有趣，最終可能會在某個地方使用它:) – 2010-03-25 10:45:09

我會去它下面的辦法......

製作確保您的內容div具有透明背景，然後在列表頂部創建另一個div，該div也是透明的，直到選定的事件發生，然後將其設置爲背景色，以確保其顯示，但請確保它的z-index低於內容divs ...然後你可以看看使用像scriptaculous庫來動畫div向下移動，你可以得到th e位置，它需要從標記爲選中的div處進入，以便您知道何時停止...我確定它們具有一些很酷的速度效果，使其更加華麗（我想象它可以快速滾動到所需的位置位置，然後慢慢到的地方）

希望「鎖定」這可以幫助您的設計策劃一些

來源

2010-03-24 23:25:50

感謝您的意見。我希望堅持jQuery。 – Andy 2010-03-24 23:37:26

那麼你可以省略scriptaculous並簡單地使用jQuery http://api.jquery.com/category/effects/ – 2010-03-25 00:06:14

jquery滑動到位置點擊

回答

相關問題