Question

我使用以下代码在鼠标悬停时菜单项中的图像之间淡出...

 $(document).ready(function() { 
      $('nav li').each(function() {
          var bgPos = $(this).css('background-position');
          $(this).css('background-position', bgPos);
          $(this).removeAttr('id');
          bgPos = bgPos.split(' ');
          var position = $(this).position();
          var cssObj = {
            'position' : 'absolute',
            'top' : position.top,
            'left' : position.left,
            'background-position' : bgPos[0]+' -115px'
          }
          var outcome = $('<li></li>').hide();
          $(outcome).css(cssObj);
          $(this).parents('.nav').append(outcome);
          $(this).data('clone', outcome);
          $(this).bind({
            mouseenter: function() {
              $(this).data('clone').fadeIn(1000);
            },
            mouseout: function() {
              $(this).data('clone').fadeOut(300);
            }
          });
      });
});

问题是因为当fadeout完成后，faded元素上的显示变为none，jQuery认为我已经再次鼠标移动，即使我的鼠标没有移动，我最终还是有一个无限循环的淡入淡出然后淡出。

Answer 1

绑定到克隆的mouseOut事件，而不是原始元素：

$(this).bind({
    mouseenter: function() {
          $(this).data('clone').fadeIn(1000);
    }});

outcome.bind({
    mouseout: function() {
          outcome.fadeOut(300);
    }});

您可能需要调整绑定到克隆的mouseOut事件的时间或HTML元素的确切布局，但这是一般的想法。

将鼠标事件与衰落结合起来

1 个答案: