2 votes

Mauvaises performances de jQuery

Je suis vraiment inexpérimenté avec jQuery mais je lis des tutoriels depuis une semaine maintenant et ceci est mon premier code. Il fonctionne, mais il commence à mal fonctionner après un certain temps. Surtout lorsque l'action mouseenter/mouseleave est appelée plusieurs fois de suite. À chaque fois, le délai augmente jusqu'à ce que je passe à un autre élément.

J'ai fait des recherches sur les mauvaises performances de jQuery mais je n'ai rien trouvé. Le mieux que j'ai trouvé est le conseil : " Utiliser les ID au lieu des sélecteurs de classe (JQuery) Mais je ne vois pas très bien pourquoi ce serait un problème et je trouve difficile de remplacer la balise ".photo" par une balise d'identification puisqu'elle est censée affecter plusieurs éléments.

J'ai aussi trouvé " En général, JavaScript est plus rapide lorsque vous recherchez ou modifiez le DOM aussi peu que possible. " Est-ce que cela pourrait être mon problème, et si oui, comment pourrais-je faire autrement ?

Alors faites-moi savoir si quelque chose vous semble bizarre dans mon code ou si vous avez une idée. Merci !

CODE

$(document).ready(function(){
    $(".photo").mouseenter(function(){
        $(this).fadeTo("fast", 0.9);
    });
    $(".photo").mouseleave(function(){
        $(this).fadeTo("fast", 0.6);
    });
    $('.photo').click(function() {
        $(this).animate({width: '900px'});
        $(this).mouseleave(function(){
            $(this).animate({width: '294px'});
        });
    });

    $('.trigger').click(function() {
        if( $("#5").is(":hidden") ) {
            $("#6").hide('slow');
            $('.trigger').fadeTo('slow', 0);
        } else if ( $("#4").is(":hidden") ){
            $("#5").hide('slow');
        } else if ( $("#3").is(":hidden") ){
            $("#4").hide('slow');
        } else if ( $("#2").is(":hidden") ){
            $("#3").hide('slow');
        } else if ( $("#1").is(":hidden") ){
            $("#2").hide('slow');
        } else {
            $("#1").hide('slow');
            $(".triggerR").fadeTo('slow', 1);
        }
    });

    $('.triggerR').click(function() {
        if( $("#6").is(":hidden") ) {
            $("#6").toggle('slow');
            $(".trigger").fadeTo('slow', 1);
        } else if( $("#5").is(":hidden") ) {
            $("#5").toggle('slow');
        } else if ( $("#4").is(":hidden") ){
            $("#4").toggle('slow');
        } else if ( $("#3").is(":hidden") ){
            $("#3").show('slow');
        } else if ( $("#2").is(":hidden") ){
            $("#2").show('slow');
        } else if ( $("#1").is(":hidden") ){
            $("#1").show('slow');
            $(".triggerR").fadeTo('slow', 0);
        } 
    });
});

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X