jQuery скрыть и исчезнуть в помощь? - PullRequest
Новая
       31

jQuery скрыть и исчезнуть в помощь?

0 голосов
/ 05 сентября 2011 
<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>

Что я достиг здесь, так это когда я нажимаю, скажем, Next box1 скрывает и box2 fadesIn, тогда, если я нажимаю Предыдущий box2 скрывает и box1 fadesIn

, но у меня есть 5 блоков, так что я хочу достичьздесь, когда я нажимаю Next, box1 скрывает, затем box2
fadesIn, затем, если я нажимаю Next снова, box2 скрывает, затем box3 fadesIn и так далее, пока я не достигну box5

, тогда функциональность Previous должна работать, но яМне тяжело делать это, потому что я давно перестал кодировать, но теперь я возвращаюсь снова, и единственное, что я не могу вспомнить, это jquery, так как я едва учился ...

спасибо за вашу помощь ...!:)

1 Ответ

4 голосов
/ 05 сентября 2011

Вы хотите воспользоваться преимуществами классов, применяемых к нескольким узлам 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/

...