Question

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

我试图制作一个使用jQuery动画和不透明度淡出的导航栏，然而，有时当你将鼠标悬停在导航栏上太快时会陷入不透明度，有时候它们会一直闪烁并且不会停止一阵子。我似乎无法弄清楚如何解决它，这是导航栏的代码：

<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>

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

Answer 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);
        });
    });
});

Answer 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

Answer 3

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

所以基本上在开始动画之前添加stop（） - 通过调用animate（） - jQuery可以防止构建动画'队列'。

Answer 4

试试这个......

<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()。从我的理解，这是你的主要问题，但无论如何，上述代码应该更适合你。

Answer 5

缓存选择器的性能更高，但您也可以将处理程序链接到一些看起来更清洁的东西：

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

Answer 6

可以使用hover方法的handlerInOut： {偷走布拉德克里斯蒂的选择者＆amp;想法...... :)}

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

使用jQuery回调函数？

6 个答案:

Working example