0

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

我想要的只是图像在我的导航中淡入/淡出，但在活动时保持 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) 它不起作用？

4

2 回答 2

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 上放置的事件处理程序的数量。

于 2012-05-18T10:56:56.897 回答
0

您可以尝试在 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);
});
于 2012-05-18T09:43:05.363 回答