使用jQuery回调函数？答案

【问题标题】：Using jQuery callback function?使用jQuery回调函数？
【发布时间】：2013-06-28 13:25:29
【问题描述】：

我一直在努力学习 jQuery，我认为它对我来说还不错。但是，我似乎无法弄清楚如何使我的编码足够高效。有时我不使用回调函数，而是喜欢“双重代码”，只是因为我似乎无法弄清楚如何跳过“缓动”的东西，这使我无法使用回调。

我尝试使用 jQuery animate 和 opacity 制作一个淡出的导航栏，但是，有时当您将鼠标悬停在导航栏上太快时，它会卡在不透明度上，有时它们只是不停地闪烁并且不会停止一阵子。我似乎无法弄清楚如何修复它，这是我的导航栏代码：

<script type="text/javascript">
    $(document).ready()
    $("#navbar ul li.1 a").mouseover(function() {
        $("#navbar ul li.1 a").animate({
            opacity: 0.5
        }, 500, function() {
            $("#navbar ul li.1 a").mouseout(function() {
                $("#navbar ul li.1 a").animate({
                    opacity: 1.0
                }, 500, function() {
                });
            });
        });
    });
    $("#navbar ul li.2 a").mouseover(function() {
        $("#navbar ul li.2 a").animate({
            opacity: 0.5
        }, 500, function() {
            $("#navbar ul li.2 a").mouseout(function() {
                $("#navbar ul li.2 a").animate({
                    opacity: 1.0
                }, 500, function() {
                });
            });
        });
    });
    $("#navbar ul li.3 a").mouseover(function() {
        $("#navbar ul li.3 a").animate({
            opacity: 0.5
        }, 500, function() {
            $("#navbar ul li.3 a").mouseout(function() {
                $("#navbar ul li.3 a").animate({
                    opacity: 1.0
                }, 500, function() {
                });
            });
        });
    });
    $("#navbar ul li.4 a").mouseover(function() {
        $("#navbar ul li.4 a").animate({
            opacity: 0.5
        }, 500, function() {
            $("#navbar ul li.4 a").mouseout(function() {
                $("#navbar ul li.4 a").animate({
                    opacity: 1.0
                }, 500, function() {
                });
            });
        });
    });
</script>

希望你能帮助我，提前谢谢你！

【问题讨论】：

Protip：看看.stop。

标签： jquery callback hover navbar

【解决方案1】：

使用this 指代检测到事件的元素：

$("#navbar ul li a").mouseover(function() {
    var $a = $(this);
    $a.off('mouseout'); // unbind the previous mouseout event handlers
    $a.animate({
        opacity: 0.5
    }, 500, function() {
        $a.on('mouseout', function() {
            $a.animate({
                opacity: 1.0
            }, 500);
        });
    });
});

【讨论】：

天哪，这太快了。应该注意，在事件处理程序中绑定事件处理程序不是一个好主意。
^^ 是的。每次发生 mouseover 事件时，您都会添加一个 mouseout 事件处理程序。
@Archer ya 但也将其删除
@roasted - 现在是，是的 ;)
@roasted 我编辑过，archer 是对的。但仍有改进的余地。

【解决方案2】：

注意事项：

使用.hover() 并为自己节省几个事件处理程序。此绑定允许您直接传入mouseenter 和mouseleave 方法。
看看.stop() 以及它如何让您免于动画挂起。
利用 jquery 可以使用的多个选择器（看起来唯一的区别是嵌套 li 元素上的一个类。

组装起来：

$('#navbar ul')                 // start with UL within #navbar
   .find('li.1,li.2,li.3,li.4') // find the <li>'s with classes 1-4
   .find('a')                   // find the <a>'s within those matches
  .hover(function(e){           // add binding
    // mouseenter
    $(this)                            // <a> target
      .stop()                          // stop current animation
      .animate({ opacity: 0.5 }, 500); // begin new animation
  }, function(e){
    // mouseleave
    $(this)                            // <a> target
      .stop()                          // stop current animation
      .animate({ opacity: 1.0 }, 500); // begin new animation

  });

此外，如果您只想调整不透明度，您可以使用.fadeTo()，但这是您的决定。我对您的意图了解得不够多，您可能只是在玩不透明度作为使其正常工作的测试。

Working example

【讨论】：

@roasted：好点。 mouseenter/mouseleave 已更正。谢谢！ ;-)

【解决方案3】：

缓存您的选择器性能更高，但您也可以链接您的处理程序以获得更简洁的内容：

$("#navbar li a") // i'm assuming you want to target all li > a  elements in your nav (but maybe your markup is complicated enough to justify li.1 etc. 
  .mouseover(function() {
      $(this).animate({
          opacity: 0.5
      }, 500);
  }).mouseout(function() { // still refers to the same object
      $(this).stop().animate({
          opacity: 1.0
      }, 500 );
  });

【讨论】：

【解决方案4】：

以下文章详细解释了如何解决您的问题：http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

所以基本上在开始动画之前添加 stop() - 通过调用 animate() - jQuery 防止构建动画“队列”。

【讨论】：

【解决方案5】：

试试这个...

<script type="text/javascript">
    $(function() {
        $("#navbar ul li a").mouseover(function() {
            $(this).stop().animate({
                opacity: 0.5
            }, 500);
        }).mouseout(function() {
            $(this).stop().animate({
                opacity: 1.0
            }, 500);
        });
    });
</script>

我只用一个替换了多个 DOM 查找。它找到所有#navbar ul li a标签并添加相关代码，使用this作为mouseover和mouseout的选定元素。我还添加了stop() 以停止任何正在运行的动画，这将停止您在鼠标悬停几次时遇到的问题。

最后，我使用了$(function() { }) 而不是document.ready，只是因为我就是这样做的。

在我发现stop() 之前，我曾经与动画队列作斗争。据我了解，这是您的主要问题，但上述代码应该更适合您。

【讨论】：

【解决方案6】：

可能是使用handlerInOut 的悬停方法： { 窃取 Brad Christie 的选择器和创意... :) }

$('#navbar ul:has(li.1,li.2,li.3,li.4) a').hover(function () {
    if (!$(this).data('out')) $(this).data('out', true).stop().fadeTo(500, .5);
    else $(this).data('out', false).stop().fadeTo(500, 1);
});

【讨论】：