0

我一直在努力学习 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>

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

4

6 回答 6

3

用于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);
        });
    });
});
于 2013-06-28T13:27:17.233 回答
2

需要注意的一些事项：

  • 使用.hover()并保存几个事件处理程序。这个绑定允许你直接传入mouseenterandmouseleave方法。
  • 看看.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()此外，如果您只想调整不透明度，您可能可以使用，但这是您的决定。我对您的意图知之甚少，您可能只是在玩不透明度作为使其正常工作的测试。

工作示例

于 2013-06-28T13:38:02.233 回答
0

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

$("#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 );
  });
于 2013-06-28T13:40:54.367 回答
0

尝试这个...

<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标签并添加相关代码，使用thiswhich 是所选元素， formouseover和mouseout。我还添加stop()了当时停止任何正在运行的动画，这将停止您在鼠标悬停几次时遇到的问题。

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

在我发现stop(). 据我了解，这是您的主要问题，但无论如何，上面的代码应该对您更好。

于 2013-06-28T13:40:13.950 回答
0

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

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

于 2013-06-28T13:27:34.890 回答
0

可能正在使用悬停方法的 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);
});
于 2013-06-28T13:49:24.730 回答