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'，这个）它不起作用？

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

Jquery悬停但未激活

2 个答案: