jquery - 使用 jQuery 突出显示事件元素

Question

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

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

这是我到目前为止的代码:

$(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 函数，以便将函数绑定(bind)到特定的类并让 jquery 处理事件。另外，请注意如何使用链接来使代码更小且更易于阅读。

JQuery Events/live documentation