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淡入然后，如果我单击上一个box2隐藏和box1 fadesIn

但我有5个盒子，所以我想在这里实现的是当我点击Next box1隐藏然后box2
fadesIn然后如果我再次单击Next，则box2隐藏然后box3 fadesIn，依此类推，直到我到达box5

那么Previous的功能必须要工作，但我很难做到这一点，因为我已经很长时间了，因为我停止编码，但现在我又回来了，我唯一能做的就是不记得是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/

jQuery hide和fadeIn帮助？

1 个答案: