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，你實際上懸停在