Jquery Slide「To」

Question

好吧，

我有一個鏈接列表，其中每個鏈接對應於他們自己的div。 divs彼此堆疊在一起。基本上我很難試圖找出如果我點擊「鏈接4」如何讓它滑動到div 4。當你點擊「鏈接1」，如何讓它滑動到div 1.我想我無法知道如何根據您點擊哪個鏈接來上下滑動div（如果這可以完成的話）。

HTML

<div id="slider"> 
    <div class="one"> </div> 
    <!--end slide--> 
    <div class="two"> </div> 
    <!--end slide--> 
    <div class="three"> </div> 
    <!--end slide--> 
    <div class="four"> </div> 
    <!--end slide--> 
</div> 
<!-- end slider --> 
<div id="clicker"> 
    <a href="#" id="link-one">DLO</a> 
    <a href="#" id="link-two">test-a</a> 
    <a href="#" id="link-three">tes-a</a> 
    <a href="#" id="link-four">te-a</a> 
</div> 

Answer 1

如果我理解你的問題，你應該尋找到的append（）函數。下面的代碼適用於jQuery 1.4.3。我添加了一些內聯樣式，只是爲了讓div在我的頁面上脫穎而出。

<div id="slider"> 
    <div class="one" style="width:200px;height:20px;background-color:gray;"> </div> 
    <!--end slide--> 
    <div class="two" style="width:200px;height:20px;background-color:white;"> </div> 
    <!--end slide--> 
    <div class="three" style="width:200px;height:20px;background-color:lime;"> </div> 
    <!--end slide--> 
    <div class="four" style="width:200px;height:20px;background-color:silver;"> </div> 
    <!--end slide--> 
</div> 
<!-- end slider --> 
<div id="clicker"> 
    <a href="#" id="link-one" onclick="$('.one').append(this)">DLO</a> 
    <a href="#" id="link-two" onclick="$('.two').append(this)">test-a</a> 
    <a href="#" id="link-three" onclick="$('.three').append(this)">tes-a</a> 
    <a href="#" id="link-four" onclick="$('.four').append(this)">te-a</a> 
</div> 

如果你想給它一個很酷的「淡入」的效果，你可以隱藏錨文本，然後將其附加到div，然後褪色它。看起來有點涼。

<div id="slider"> 
    <div class="one" style="width:200px;height:20px;background-color:gray;"> </div> 
    <!--end slide--> 
    <div class="two" style="width:200px;height:20px;background-color:white;"> </div> 
    <!--end slide--> 
    <div class="three" style="width:200px;height:20px;background-color:lime;"> </div> 
    <!--end slide--> 
    <div class="four" style="width:200px;height:20px;background-color:silver;"> </div> 
    <!--end slide--> 
</div> 
<!-- end slider --> 
<div id="clicker"> 
    <a href="#" id="link-one" onclick="$(this).hide();$('.one').append(this);$(this).fadeIn();">DLO</a> 
    <a href="#" id="link-two" onclick="$(this).hide();$('.two').append(this);$(this).fadeIn();">test-a</a> 
    <a href="#" id="link-three" onclick="$(this).hide();$('.three').append(this);$(this).fadeIn();">tes-a</a> 
    <a href="#" id="link-four" onclick="$(this).hide();$('.four').append(this);$(this).fadeIn();">te-a</a> 
</div>