jQuery的隱藏和淡入的幫助？

Question

<style> 
.box1{display:block;} 

.box2{display:none;} 

.box3{display:none;} 

.box4{display:none;} 

.box5{display:none;} 
</style> 



<script type="text/javascript"> 
$(document).ready(function(){ 
$(".buttonn").click(function(){ 
$(".box1").hide(); 
$(".box2").fadeIn() 
});  

$(".buttonp").click(function(){ 
$(".box2").hide(); 
$(".box1").fadeIn() 
}); 

}); 
</script> 



<div class="box1"> 
<img src="1box.png" /> 
Hello I'm one 
</div> 


<div class="box2"> 
<img src="2box.png" /> 
Hello I'm two 
</div> 

<div class="box3"> 
<img src="3box.png" /> 
Hello I'm three 
</div> 

<div class="box4"> 
<img src="4box.png" /> 
Hello I'm four 
</div> 



<div class="box5"> 
<img src="5box.png" /> 
Hello I'm five 
</div> 


<div class="buttonn">Next</div> 
<div class="buttonp">Previous</div> 

我實現這裏是當我點擊什麼可以說，下一步BOX1皮和BOX2 fadesIn 然後如果我點擊上一頁BOX2皮和盒1 fadesIn

，但我有5盒所以，我想在這裏實現的是當我點擊下一步，然後揣BOX1 BOX2
fadesIn然後，如果我再次單擊下一步BOX2皮然後BOX3 fadesIn依此類推，直到我達到了Box5

那麼以前的功能要工作，但我有一個硬因爲自從我停止編碼以來我已經很長時間了，但現在我又回來了，並且是唯一的事情我不記得是jquery，因爲我幾乎沒有讀書......

感謝您的幫助......！ :)

Answer 1

你想利用類被應用到多個DOM節點:)

HTML：

<div id="boxes"> 

    <div class="box"> 
     Hello I'm one 
    </div> 

    <div class="box"> 
     Hello I'm two 
    </div> 

    <div class="box"> 
     Hello I'm three 
    </div> 

    <div class="box"> 
     Hello I'm four 
    </div> 

    <div class="box"> 
     Hello I'm five 
    </div> 
</div> 
<span id="next">Next</span> <span id="prev">Prev</span> 

JQuery的：（編輯：增加了一些選擇的緩存和垃圾郵件點擊預防）

$('.box:first-child').fadeIn(); 

var _fading = false; 

$('#next').click(function() 
{ 
    if(_fading) 
    { 
     return false; 
    } 

    _fading = true; 
    var _visible = $('.box:visible'); 

    if(_visible.next().length > 0) 
    { 
     _visible.fadeOut().next().fadeIn('slow',function() 
     { 
      _fading = false; 
     }); 
    } 
    else 
    { 
     _visible.fadeOut().siblings(':first-child').fadeIn('slow',function() 
     { 
      _fading = false; 
     }); 
    } 
}); 

$('#prev').click(function() 
{ 
    if(_fading) 
    { 
     return false; 
    } 

    _fading = true; 
    var _visible = $('.box:visible'); 

    if(_visible.prev().length > 0) 
    { 
     _visible.fadeOut().prev().fadeIn('slow',function() 
     { 
      _fading = false; 
     }); 
    } 
    else 
    { 
     _visible.fadeOut().siblings(':last-child').fadeIn('slow',function() 
     { 
      _fading = false; 
     }); 
    } 
}); 

工作演示：http://jsfiddle.net/AlienWebguy/GvjKu/