Mettre en surbrillance des éléments actifs avec jQuery

Question

J'ai donc une liste non ordonnée que j'aimerais que jQuery surligne le lien actif de cette liste. J'ai des animations sur la liste pour mouseenter et mouseleave qui augmente la taille de la police quand un lien est survolé.

Je peux obtenir les liens pour rester à leur taille et couleur augmentées en utilisant .unbind sur le mouseleave, mais quand j'essaye de re-lier le lien, les liens perdent tous leur surbrillance.

Voici mon code à ce jour:

$(document).ready(function() { 
    slide("#sliding-navigation", 22, 17, 175, .8); 
}); 

function slide(navigation_id, font_out, font_in, time, multiplier) { 
    // Creates the target paths 
    var list_elements = navigation_id + " li.sliding-element"; 
    var link_elements = list_elements + " a"; 

    // Initiates the timer used for the initial sliding animation 
    var timer = 0; 

    // Create the beginning slide animation 
    $(list_elements).each(function(i) { 
    // updates timer 
    timer = (timer*multiplier + time); 
    $(this).animate({ marginLeft: "0" }, timer); 
    $(this).animate({ marginLeft: "15px" }, timer); 
    $(this).animate({ marginLeft: "0" }, timer); 
    }); 

    // Creates the hover effect 
    $(link_elements).each(function(i) { 
    $(this).mouseenter(function() { 
     $(this).animate({ fontSize: font_out }, 200); 
    }), 
    $(this).mouseleave(function() { 
     $(this).animate({ fontSize: font_in }, 400); 
    }), 
    // Highlights active link  

    $('a').click(function() { 
     $('a.active').bind('mouseleave'); 
     $('a.active').addClass('inactive'); 
     $('a.active').removeClass('active'); 
     $(this).removeClass('inactive'); 
     $(this).addClass('active'); 
     $(this).unbind('mouseleave'); 
    }); 
} 

Toute aide à ce serait grandement apprécié. Merci d'avance pour toute suggestion!

Chris

Answer 1

changement

$('a.active').bind('mouseleave'); 

à

$('a.active').mouseenter(function() { 
     $(this).animate({ fontSize: font_out }, 200); 
    }).mouseleave(function() { 
     $(this).animate({ fontSize: font_in }, 400); 
    }), 

qu'ISS le changement le plus simple en laissant la plupart de votre code intact. Vous voudrez peut-être vérifier la fonction live de jquery afin de rendre les fonctions liées à des classes spécifiques et laisser jquery gérer les événements. Notez également comment vous pouvez utiliser le chaînage pour rendre votre code plus petit et plus facile à lire.

JQuery Events/live documentation

Answer 2

I figured it out! Je ne l'ai pas compris avec la fonction live, et il y a probablement une bien meilleure façon de le faire.

Voici le code original que j'ai changé:

$('a').click(function() { 
    $('a.active').bind('mouseleave'); 
    $('a.active').addClass('inactive'); 
    $('a.active').removeClass('active'); 
    $(this).removeClass('inactive'); 
    $(this).addClass('active'); 
    $(this).unbind('mouseleave'); 
}); 

Avec ce code:

$('a').click(function() { 
    $('a').animate({ fontSize : font_in }, 0); 
    $(this).animate({ fontSize : font_out }, 0); 
    $('a.active').mouseenter(function() { 
     $(this).animate({ fontSize: font_out }, 200); 
    }).mouseleave(function() { 
     $(this).animate({ fontSize: font_in }, 400); 
    }), 
    $('a.active').addClass('inactive'); 
    $('a.active').removeClass('active'); 
    $(this).removeClass('inactive'); 
    $(this).addClass('active'); 
    $(this).unbind('mouseleave mouseenter'); 
});