jQuery切换图像开/关问题

我是jQuery的新手，所以我非常感谢任何人能给我的帮助。我查阅了档案，似乎找不到我要找的答案

基本上，我试图实现的功能是这样的——一个图像列表，当一个图像悬停在上面时，所有其他图像都会淡出

我已经做到了这一点，但是，如果你将光标移动到另一个图像上，它会保持淡出状态。如果您离开包装div，然后将光标移回其中，则淡出会起作用。我需要用户能够将光标从一个图像无缝地移动到另一个图像

这是js-

<script type="text/javascript">
    $(document).ready(function(){
        $(".charity_logo img").hover(
            function(){
                $(this).toggleClass("trigger").next().toggleClass("trigger");
            return false;
        });
    });
</script>
<script type="text/javascript">
    var types = ["trigger"], dimmed = 1.0, threshhold = 20;
    $(document).ready(function() {
        $.each(types, function(index, type) {
          var hover = (function() {
              var timer;
              return {
                  over: function(event) {
                      if (timer) {
                          clearTimeout(timer);
                      }
                      timer = setTimeout(function() {$("img." + type).stop().fadeTo("slow", 0.4);}, threshhold);
                  },
                  off: function(event) {
                      if (timer) {
                          clearTimeout(timer);
                      }
                      timer = setTimeout(function() {$("img." + type).stop().fadeTo("slow", dimmed);}, threshhold);
                  }
              };  
          })();
          $("img." + type).fadeTo(0, dimmed).hover(hover.over, hover.off);
        });
    });
</script>

$（文档）.ready（函数（）{
$（“.charity_logo img”）。悬停(
函数（）{
$（this）.toggleClass（“触发器”）.next（）.toggleClass（“触发器”）；
返回false；
});
});
变量类型=[“触发器”]，变暗=1.0，阈值=20；
$（文档）.ready（函数（）{
$.each（类型、函数（索引、类型）{
var hover=（函数（）{
无功定时器；
返回{
结束：功能（事件）{
中频（定时器）{
清除超时（计时器）；
}
timer=setTimeout（函数（）{（$（.img.+type）.stop（）.fadeTo（“slow”，0.4）；}，threshold）；
},
关闭：功能（事件）{
中频（定时器）{
清除超时（计时器）；
}
timer=setTimeout（函数（）{$（“img.”+type）.stop（）.fadeTo（“慢速”，暗显）；}，阈值保持）；
}
};  
})();
$（“img.”+type）.fadeTo（0，暗显）.hover（hover.over，hover.off）；
});
});

---------------------这是html---------------------------

        <div class="bubbleInfo charity_logo">
            <a href="http://www.google.ie"><img class="trigger" alt="Charity Logo" src="<?php bloginfo('template_directory'); ?>/img/banner_logos/charity-logo-banner_01-26.jpg" /></a>
            <div class="popup">
                <p class="title">Charity Name</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut felis odio, aliquet vel pharetra eu.</p>
            </div><!--popup-->
        </div><!--charity_logo-->

        <div class="bubbleInfo charity_logo">
            <a href="http://www.google.ie"><img class="trigger" alt="Charity Logo" src="<?php bloginfo('template_directory'); ?>/img/banner_logos/charity-logo-banner_01-27.jpg" /></a>
            <div class="popup">
                <p class="title">Charity Name</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut felis odio, aliquet vel pharetra eu.</p>
            </div><!--popup-->
        </div><!--charity_logo-->

        <div class="bubbleInfo charity_logo">
            <a href="http://www.google.ie"><img class="trigger" alt="Charity Logo" src="<?php bloginfo('template_directory'); ?>/img/banner_logos/charity-logo-banner_01-28.jpg" /></a>
            <div class="popup">
                <p class="title">Charity Name</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut felis odio, aliquet vel pharetra eu.</p>
            </div><!--popup-->
        </div><!--charity_logo-->

        <div class="bubbleInfo charity_logo">
            <a href="http://www.google.ie"><img class="trigger" alt="Charity Logo" src="<?php bloginfo('template_directory'); ?>/img/banner_logos/charity-logo-banner_01-29.jpg" /></a>
            <div class="popup">
                <p class="title">Charity Name</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut felis odio, aliquet vel pharetra eu.</p>
            </div><!--popup-->
        </div><!--charity_logo-->

    </div><!--logo_banner-->

慈善机构名称

Lorem ipsum dolor sit amet，是一位杰出的献身者。我是奥迪奥，我是欧盟主席

慈善机构名称

Lorem ipsum dolor sit amet，是一位杰出的献身者。我是奥迪奥，我是欧盟主席

慈善机构名称

Lorem ipsum dolor sit amet，是一位杰出的献身者。我是奥迪奥，我是欧盟主席

慈善机构名称

Lorem ipsum dolor sit amet，是一位杰出的献身者。我是奥迪奥，我是欧盟主席

---

提前谢谢

我会用css来做这件事

.div_container img
{
  filter:alpha(opacity=100);
  /* CSS3 standard */
  opacity:1.0;
}

.div_container:hover img
{
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
}

.div_container:hover img:hover
{
  filter:alpha(opacity=100);
  /* CSS3 standard */
  opacity:1.0;
}

---

当不悬停在contianer div上时，所有选项都完全可见。当鼠标进入div时，所有img都被设置为透明，除了您实际悬停在上面的img外

看起来工作正常（或者我不理解问题？）。检查这里：@Beon Hi Beon，是的，它似乎在那里工作得很好，除了当所有图像都并排排列（使用css）时，它无法识别您何时离开一个图像转到另一个图像。嗨，Matt，谢谢您的回答。我花了一段时间才回到这个问题上，因为我有一段时间没有参与这个项目。是的，我认为你的建议会起作用，除了这个网站需要在IE7+中工作，我认为它只支持：如果我没有弄错的话，就悬停在锚上，因此决定使用JS。此外，还有其他一些影响，如慢衰落，这将只能通过CSS3实现，而这并不是所有浏览器都完全支持的。