Jquery悬停但未激活

Question

我编写了一段代码，让我的垂直导航在图像上产生一个小的淡入/淡出悬停效果。唯一的问题是我不能让主动者不做任何事情。

我想要的只是图像在我的导航中淡入/淡出，但在活动时保持 100% 的不透明度，而不是在悬停时设置动画。下面代码的问题是，即使不活动，它们也会动画？

现在我不是 jquery 专家，但这是我想学习的东西，所以任何帮助都将不胜感激。

      if (!$(".view-sidebar-links .views-row a").hasClass("active")) {
                $(".view-sidebar-links .views-row").hover(
                    function() {
                    $("img", this).fadeTo("fast", 1);;
                },
                function() {
                    $("img", this).fadeTo("fast", 0.33);;
    });
  };

html

     <div class="view-content">

       <div class="views-row views-row-1 views-row-odd views-row-first">
        <h2 class="title"><a href="/alpiniainstitute/about/clinical-devlopment">Clinical devlopment</a></h2>    
        <a href="/alpiniainstitute/about/clinical-devlopment"><img typeof="foaf:Image" src="http://localhost/alpiniainstitute/sites/default/files/styles/sidebar_links/public/images/slideshow/image01.jpg" /></a>
      </div>

      <div class="views-row views-row-2 views-row-even">
       <h2 class="title"><a href="/alpiniainstitute/about/technological-development">Technological development</a></h2>    
       <a href="/alpiniainstitute/about/technological-development"><img typeof="foaf:Image" src="http://localhost/alpiniainstitute/sites/default/files/styles/sidebar_links/public/images/header-images/Screen%20shot%202012-05-11%20at%2010.05.30.png" /></a>
      </div>

      <div class="views-row views-row-3 views-row-odd views-row-last">
       <h2 class="title"><a href="/alpiniainstitute/team" class="active">Our Team</a></h2>    
       <a href="/alpiniainstitute/team" class="active"><img typeof="foaf:Image" src="http://localhost/alpiniainstitute/sites/default/files/styles/sidebar_links/public/images/header-images/team-header-image.jpg" /></a>    
      </div>

    </div>

编辑：

我离得很近。

    $(".views-row").delegate("a:not(.active)", "mouseenter", function() {
      $('img').fadeTo('fast', 1);
    }).delegate("a:not(.active)", "mouseleave", function() {
      $('img').fadeTo('fast', 0.33);
    });         

我已经设法让它工作了，现在你可以看到上面的代码适用于页面上的所有图像。如果我添加 ('img', this) 它不起作用？

Answer 1

你的逻辑有点不正确。您是在条件中设置事件处理程序，而不是相反（即检查事件处理程序中的条件）。

另外，试试委托：

$('.views-row')
    .on('mouseover', 'a:not(.active)', function () {
        $('img', this).fadeTo('fast', 1);
    })
    .on('mouseout', 'a:not(.active)', function () {
        $('img', this).fadeTo('fast', 0.33);
    });

这样，如果您的视图行打开/关闭它们的 active 类，您仍然可以即时检查是否运行处理程序，同时还可以最大限度地减少您实际放置的事件处理程序的数量在你的 DOM 上输出它们。

Answer 2

您可以尝试在 Jquery 中使用 .not('selector')

更新：试试这个：

$(".views-row").delegate("a:not(.active)", "mouseenter", function() {
  $(this).find('img').fadeTo('fast', 1);
}).delegate("a:not(.active)", "mouseleave", function() {
  $(this).find('img').fadeTo('fast', 0.33);
});