jQuery 切换图像开/关问题

Question

对 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>

--------------------这是 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-->

提前致谢!

Answer 1

我会用 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