jQuery切换图像开启/关闭问题

Question

jquery new-ish，所以我会很感激任何人都可以给我的帮助。我浏览了档案，似乎无法找到我正在寻找的答案。

基本上我试图实现的功能就是这个 - 图像列表，当一个图像被放在上面时，所有其他图像都会淡出。

但是，如果将光标移动到另一个图像上，它会保持淡出状态。如果你离开包装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

当不悬停在contianer DIV我会做到这一点，在短短的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; 
} 

，都是完全可见。当鼠标进入div时，所有img都设置为透明，除了img，你实际上悬停在