jQuery Toggle images on / off issue

Question

new-ish to jQuery so I'd appreciate any help anyone could give me. I've had a look through the archives and can't seem to find an answer for what I'm looking for.

Basically the functionality I'm trying to achieve is this - a list of images, and when one image is hovered on, all the others fade out.

I have achieved this, however, if you move the cursor onto another image, it stays faded out. If you leave the wrapping div, and then move your cursor back into it, the fade out works. I need the user to be able to move their cursor from one image to the other seamlessly.

Here's the 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>

---------------------and here's the 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-->

Thanks in advance!

Answer 1

I would do this in just 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;
}

When not hovering over the contianer div, all are fully visible. When the mouse enters the div all img are set transparent, except for the img you actually hover over