jQuery hide And fadeIn help?

<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"&g开发者_StackOverflow中文版t;
<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> 

What i achieved here is when i click on lets say Next box1 hides and box2 fadesIn then if i click Previous box2 hides and box1 fadesIn

but i have 5 boxes so what i want to achieve here is when i click Next box1 hides then box2

fadesIn then if i click Next again box2 hides then box3 fadesIn and so on until i reach box5

then the functionality of Previous has to work to, but i'm having a hard time doing this since i'ts been a long time since i stop coding but now i'm coming back again and the only thing that i can't remember is jquery since i was barely studying...

thanks for your help...! :)

You want to take advantage of classes being applied to more than one DOM node :)

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: (Edit: Added some selector caching and spam clicking prevention)

$('.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;
        });  
    }
});

Working Demo: http://jsfiddle.net/AlienWebguy/GvjKu/