Highlighting active elements with jQuery

Question

So I have an unordered list that I would like to have jQuery highlight the active link on that list. I have animations on the list for mouseenter and mouseleave which increases the font size when the a link is hovered.

I can get the links to stay at their increased size and color by using .unbind on the mouseleave, but when I try to re-bind the link, the links lose all of their highlighting.

Here's my code so far:

$(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');
    });
}

Any help with this would be greatly appreciated. Thanks in advance for any suggestions!

Chris

Answer 1

Change

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

to

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

That iss the simplest change leaving most of your code intact. You may want to check out jquery's live function in order to make the functions tied to specific classes and let jquery handle the events. Also, notice how you can use chaining to make your code smaller and easier to read.

JQuery Events/live documentation

Answer 2

I figured it out! I didn't get it with the live function, and there is probably a much better way to do it.

Here's the original code that I changed:

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

With this 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');
});