How do I animate elements stored in an array? except for the one I'm hovering over?

This is what I have:

    jQuery.each(s开发者_StackOverflowhapes, function(i) { 
            this.hover(function(event) {
                this.animate({
                    fill: "#fff"
                }, 500);
            }, function(event) {
                this.animate({
                    fill: "#555"
                }, 500);
            });
    });

I'm using raphael.js, but I figure this issue is general to jQuery syntax.

So, when I hover over an element (stored in shapes) I want that element to remain as-is, but then change che opacity of all the other elements. I don't know where to start.=\

EDIT:

so, I feel like, as far as semantics goes, this should work:

jQuery.each(shapes, function(i) { 
        current_shape = this;
            this.hover(function(event) {
                jQuery.each(shapes, function(j){
                    if (shapes[users_with_direct_employees[j][0]] != current_shape){
                          shapes[users_with_direct_employees[j][0]].animate({
                                fill: "#fff"
                            }, 500);
                    }
                });

            }, function(event) {
                jQuery.each(shapes, function(j){
                    if (shapes[users_with_direct_employees[j][0]] != current_shape){
                          shapes[users_with_direct_employees[j][0]].animate({
                                fill: "#555"
                            }, 500);
                    }
                });
            });
    });

but only the last touched shape does the animation. I'll make a js fiddel here in a bit

fiddle: http://jsfiddle.net/G5mTx/1/

---

Assuming, the shapes array is an array of DOM elements, I think you can use something like this where you set up a hover event handler for each shape and then within each function passed to the hover event handler, you iterate over the shapes array and if it's not the one that you are hovering over, you do the animation.

   jQuery.each(shapes, function(i) { 
        this.hover(function(event) {
            var self = this;
            jQuery.each(shapes, function(index, value) {
                if (value != self) {
                    $(value).animate({fill: "#fff"}, 500);
                }
            });
        }, function(event) {
            var self = this;
            jQuery.each(shapes, function(index, value) {
                if (value != self) {
                    $(value).animate({fill: "#555"}, 500);
                }
            });
        });
   });

or it might be cleaner with a local function:

   jQuery.each(shapes, function(i) { 

       function animateIfNotMe(me, fillValue) {
            jQuery.each(shapes, function(index, value) {
                if (value != me) {
                    $(value).animate({fill: fillValue}, 500);
                }
            });
        }

        this.hover(function(event) {
            animateIfNotMe(this, "#fff");
        }, function(event) {
            animateIfNotMe(this, "#555");
        });
   });

EDIT: I see you've added actual code now to your question (since I wrote my answer) and shapes isn't an array of DOM objects (it would be nice if you had disclosed that originally) so obviously this code won't work exactly as it is, but hopefully you can get the idea from this code for how you can iterate over all the other shapes and just exclude the current one you are hovering on and you can then adapt it to your particular shapes data structure.

---

You can use the method .not():

jQuery.each(shapes, function(i) { 
   $(this).hover(function(event) {
     shapes.not($(this)).animate({