nexAll () / prevAll () и условие с hasClass ()

Я начинаю с jQuery (и у меня также плохой английский: p)

У меня проблема с использованием prevAll()/nextAll() jQuery.

Вот мой HTML-код:

<div id="zone-presentation">
    <ul id="nav-pres">
        <li>
            <a class="navigation-pres on" id="nav-intro-pres">
                <img src="images/nav-intro.png" alt="Intro" />
                <span class="cache">
                    Intro
                </span>
            </a>
        </li>
        <li>
            <a class="navigation-pres" id="nav-concep-pres">
                <img src="images/nav-conception.png" alt="Conception" />
                <span class="cache">
                    Conception
                </span>
            </a>
        </li>
        <li>
            <a class="navigation-pres" id="nav-rea-pres">
                <img src="images/nav-realisation.png" alt="Réalisation" />
                <span class="cache">
                    Réalisation
                </span>
            </a>
        </li>
        <li>
            <a class="navigation-pres" id="nav-post-pres">
                <img src="images/nav-post-prod.png" alt="Post-prod" />
                <span class="cache">
                    Post-prod
                </span>
            </a>
        </li>
        <li>
            <a class="navigation-pres" id="nav-diff-pres">
                <img src="images/nav-diffusion.png" alt="Diffusion" />
                <span class="cache">
                    Diffusion
                </span>
            </a>
        </li>
    </ul>
    <div id="content-pres">
        <div id="intro-pres" class="bla-pres"></div>
        <div id="concep-pres" class="bla-pres"></div>
        <div id="rea-pres" class="bla-pres"></div>
        <div id="post-pres" class="bla-pres"></div>
        <div id="diff-pres" class="bla-pres"></div>
    </div>
</div>

Вот мой код jQuery:

   $('#nav-intro-pres').click(function(){
       if($('#intro-pres').css('top','100%')){
           $('#intro-pres').animate({top : '0'});
       } else if($('#intro-pres').css('top','-100%')){
           $('#intro-pres').nextAll('.bla-pres').animate({top : '100%'});
           $('#intro-pres').animate({top : '0'});
       }
   });

$('#nav-concep-pres').click(function(){
if($('#concep-pres').css('top','100%')){
    $('#concep-pres').animate({top : '0'});
    $('#concep-pres').prevAll('.bla-pres').animate({top : '-100%'});
} else if($('#concep-pres').css('top','-100%')){
    $('#concep-pres').nextAll('.bla-pres').animate({top : '100%'});
    $('#concep-pres').animate({top : '0'});
}
});


$('#nav-rea-pres').click(function(){
if($('#rea-pres').css('top','100%')){
    $('#rea-pres').animate({top : '0'});
    $('#rea-pres').prevAll('.bla-pres').animate({top : '-100%'});
} else if($('#rea-pres').css('top','-100%')){
    $('#rea-pres').nextAll('.bla-pres').animate({top : '100%'});
    $('#rea-pres').animate({top : '0'});
}
});

$('#nav-post-pres').click(function(){
if($('#post-pres').css('top','100%')){
    $('#post-pres').animate({top : '0'});
    $('#post-pres').prevAll('.bla-pres').animate({top : '-100%'});
} else if($('#post-pres').css('top','-100%')){
    $('#post-pres').nextAll('.bla-pres').animate({top : '100%'});
    $('#post-pres').animate({top : '0'});
}
});


$('#nav-diff-pres').click(function(){
if($('#diff-pres').css('top','100%')){
    $('#diff-pres').animate({top : '0'});
    $('#diff-pres').prevAll('.bla-pres').animate({top : '-100%'});
} else if($('#diff-pres').css('top','-100%')){
    $('#diff-pres').animate({top : '0'});
}
});

hasClass('on') условие hasClass('on') все работает...

Я знаю, что мой код можно уменьшить, но я не знаю, как из-за моей слабости с jQuery...

Здесь онлайн-версия, это поможет, я думаю: http://www.maximejimenez.fr/test_insieme/index.html Спасибо за вашу драгоценную помощь!