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的实时函数，以使函数与特定类绑定，并让jquery处理事件。另外，请注意如何使用链接使代码更小，更易于阅读。

JQuery Events/live documentation

Answer 2

我明白了！我没有通过live函数获得它，并且可能有更好的方法来实现它。

这是我更改的原始代码：

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

使用jQuery突出显示活动元素

2 个答案: