slice et fadeIn

Le problème exposé dans ce sujet a été résolu.

Bonjour, je suis entrain de devenir fou…

edit c’est bon j’ai compris… le display none est sur le "a" alors que le fadein est sur la li… je suis un abrutis :diable: merci et dsl

j’ai une liste de taille variable, je veux afficher que les 5 premiers et un chevron (down), quand je clique sur le chevron, je veux rendre invisible les 5 premiers et afficher les 5 suivants…

voici un exemple de liste html

<ul id="Mar" class="col-2">
    <li class="jour"><b> 13/11</b><br>  Mar</li>
    <a  id="first" href=""><i class="fa fa-chevron-up fa-lg"></i></li></a>

    <a class="horaire" href="/"><li>10:45</li></a>

    <a class="horaire" href="/"><li>11:15</li></a>

    <a class="horaire" href="/"> <li>11:45</li></a>

    <a class="horaire" href="/"><li>12:15</li></a>

    <a class="horaire" href="/"><li>12:45</li></a>

    <a class="horaire" style="display:none;" href=""><li>14:30</li></a>

    <a class="horaire" style="display:none;" href=""><li>15:00</li></a>

    <a class="horaire" style="display:none;" href=""><li>15:30</li></a>

    <a class="horaire" style="display:none;" href=""><li>16:00</li></a>

    <a class="horaire" style="display:none;" href=""><li>16:30</li></a>

    <a class="horaire" style="display:none;" href=""><li>17:00</li></a>
 <a href="#" class="chevron" id="last"><li class="last"><i class="fa fa-chevron-down fa-lg"></i></li></a>
</ul>

et voici le jquery pour le chevron down

$(document).ready(function(){
    var moveCount = 0;
    
    $('.last').click(function(){
        jour = $(this).closest('ul').attr('id');
        var lis = $('ul#'+jour+' .horaire li');
        len = lis.length;
        
        if(moveCount+6 <= len){  
            $(lis).slice(moveCount, moveCount+5).fadeOut('slow');

            if(moveCount+11 <= len){
                $("#"+ jour + " #first").hide().fadeIn('slow');                
                $(lis).slice(moveCount+5, moveCount+11).fadeIn('slow');

            } else {
                $(lis).slice(moveCount+5, len).fadeIn('slow');
                $(lis).slice(moveCount+5, len).css("padding","100px");
            }
            moveCount = moveCount+5;

        } else { 
            $("."+jour+" .last").hide();
            moveCount = len;  
        }
    });

j’ai essayé de remplacer le fadeIn(’slow’) par un css(’padding’,'100px’) et en supprimant le display:none et ca fonctionne pas mal du tout

je ne comprends pas, avez vous une idée? merci

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte