jQuery画像のオン/オフを切り替える

Question

new-ish to jQueryなので、誰でも私に教えていただけると助かります。私はアーカイブを通して見てきたし、私が探しているものの答えを見つけることができないようです。

基本的に私が達成しようとしている機能は、画像のリストで、1つの画像が上に置かれると、他のすべてがフェードアウトします。

私はこれを達成しましたが、カーソルを別の画像に移動すると、色あせたままになります。折り返し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--> 

ありがとう！ contianer divの上でホバリングしない場合

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; 
} 

でこれを行うと、すべてが完全に表示されています。マウスがdivに入ると、実際にマウスを置いたimgを除いてすべてのimgが透明に設定されます