Question

当它是当前页面时，我需要在链接（'li'）上禁用动画/淡入淡出。

我的HTML

<div id="hp-navigation-second">
<ul>
  <li class="works current"><a href="javascript:void(0);return false;" title="How it Works">
    <h1>How it Works</h1></a></li>
  <li class="benefits"><a href="member-benefits.html" title="Member Benefits">
    <h1>Member Benefits</h1></a></li>
  <li class="start"><a href="get-started.html" title="Become a member">
    <h1>Become a Member</h1></a></li>
  <li class="tours"><a href="tour.html" title="Take a tour">
    <h1>Take a Tour</h1></a></li>              
</ul>

我的jQuery

<script type="text/javascript">
$(document).ready(function () {
    $("#hp-navigation-second li").hover( function() {
      $(this).stop().animate({"backgroundColor":"#0E5B89"},  "medium");
    },function() {
      $(this).stop().animate({"backgroundColor":"#a6a6a6"},  "slow");
    });
});
</script>

Answer 1

如果我理解你的要求：如果有问题的LI有“当前”的css类名，你不想运行动画。

您可以使用.not（）方法过滤掉当前节点（如下所示）： $（“＃hp-navigation-second li”）。not（“。current”）

你也可以直接使用：not selector： $（“＃hp-navigation-second li：not（.current）”）

以下是第一个例子：

$(document).ready(function () { 
 $("#hp-navigation-second li").not(".current").hover(function() {       
   $(this).stop().animate({"backgroundColor":"#0E5B89"}, "medium"); },function() { 
   $(this).stop().animate({"backgroundColor":"#a6a6a6"}, "slow"); 
 }); 
});

Answer 2

<script type="text/javascript">
$(document).ready(function () {
    $("#hp-navigation-second li").hover(function() {
      var $this = $(this),
          $a = $this.find("a");

      if ($a.attr("href") !== window.location.href) {
          $this.stop().animate({"backgroundColor":"#0E5B89"},  "medium");
      }
    },function() {
      var $this = $(this),
          $a = $this.find("a");

      if ($a.attr("href") !== window.location.href) {
          $this.stop().animate({"backgroundColor":"#a6a6a6"},  "slow");
      }
    });
});
</script>

jQuery停止.animate（）来处理当前页面

2 个答案: