How can I say to jQuery hover all images by hovering the gallery

Question

I found a simple jquery script, that do the opacity of a image set to 0 by hovering an image from a list. I like the effect, but it is working only on 1 image in a ul packed gallery. My answer ist, how can I say to jquery, hey do this to all images in the ul, where the images are in lists listet, when I hover the the gallery div/ul?

edit: I use here two classes, grey and color. Under the grey class images is the color class image. The grey class will set to 0, then it will show up the color image. This is still working for hovering 1 image from that list, but I like to have this effect to all images together, at the same time by hovering the gallery_container div or the ul gallery. Can somebody help, how to write the jquery right for this?

HTML

<div class="gallery_container">
    <ul class="gallery">
        <li> <a href="#"><img src="images/01_grey.gif" class="grey" /></a>
            <img src="images/01_color.gif" class="color" />
        </li>
        <li> <a href="#"><img src="images/02_grey.gif" class="grey" /></a>
          <img src="images/02_color.gif" class="color" />
        </li>
    </ul>
</div>

jQuery

$(document).ready(function(){
    $("img.grey").hover(
    function() {
    $(this).stop().animate({"opacity": "0"}, "slow");
    },
    function() {
    $(this).stop().animate({"opacity": "1"}, "slow");
    });
});

CSS

.gallery li {
    float: left;
    margin-right: 20px;
    list-style-type: none;
    margin-bottom: 20px;
    display: block;
    height: 130px;
    width: 130px;
    position: relative;
}

img.grey {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

img.color {
    position: absolute;
    left: 0; top: 0;
}

Answer 1

-Edit-

OP's desired effect is grayscale<->color, not opacity.

OP's ref: http://themes.quemalabs.com/elitist/

Updated fiddle: http://jsfiddle.net/bwbNH/

---

OP,

From what I understand, you want to fade out all images whenever the user hovers over any of the images. While I don't know your use case, this might be confusing as it's not exactly standard. In any case, I'd suggest binding your events to the parent ul.gallery and assigning the animation to its children: $(this).children('li')

Fiddle : http://jsfiddle.net/KaZFL/

---

JS

$(document).ready(function () {
    $(".gallery").mouseenter(function () {
        $(this).children('li').stop().animate({
            "opacity": "0"
        }, "slow");
    }).mouseleave(function () {
        $(this).children('li').stop().animate({
            "opacity": "1"
        }, "slow");
    });
});

Answer 2

Here is update javascript:

$(document).ready(function(){
  $('.gallery').hover(function() {
    $('.gallery img').stop().animate({"opacity": "0"}, "slow");
  }, function() {
    $('.gallery img').stop().animate({"opacity": "1"}, "slow");
  });
}

Answer 3

Try something like this:    

$('ul.gallery li a img.grey').hover(function(e){
e.preventDefault();
...
...
});

Answer 4

Try.

$(".gallery_container").hover(
function()
{
    $(this).find('img').stop().animate({"opacity": "0.5"}, "slow");
},
function()
{
    $(this).find('img').stop().animate({"opacity": "1"}, "slow");
});

See Fiddle