使用 jQuery 突出显示活动元素

Question

所以我有一个无序列表，我想让 jQuery 突出显示该列表上的活动链接。我在 mouseenter 和 mouseleave 列表上有动画，当链接悬停时会增加字体大小。

我可以通过在 mouseleave 上使用 .unbind 使链接保持增加的大小和颜色，但是当我尝试重新绑定链接时，链接会失去所有突出显示。

到目前为止，这是我的代码：

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

对此的任何帮助将不胜感激。提前感谢您的任何建议！

克里斯

Answer 1

改变

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

到

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

这是最简单的更改，使您的大部分代码保持不变。您可能需要查看 jquery 的 live 函数，以便将函数绑定到特定类并让 jquery 处理事件。另外，请注意如何使用链接来使代码更小、更易于阅读。

JQuery Events/live documentation

Answer 2

我想通了！我没有通过实时功能获得它，并且可能有更好的方法来做到这一点。

这是我更改的原始代码：

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

使用此代码：

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