Javascript 如何设置存储在数组中的元素的动画？除了一个I'；我在上空徘徊？

这就是我所拥有的：

    jQuery.each(shapes, function(i) { 
            this.hover(function(event) {
                this.animate({
                    fill: "#fff"
                }, 500);
            }, function(event) {
                this.animate({
                    fill: "#555"
                }, 500);
            });
    });

我使用的是raphael.js，但我认为这个问题对于jQuery语法来说是通用的

因此，当我将鼠标悬停在某个元素（存储在形状中）上时，我希望该元素保持原样，但随后更改所有其他元素的透明度。我不知道从哪里开始=\

编辑：

所以，我觉得，就语义而言，这应该是可行的：

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

但只有最后一个接触的形状才会生成动画。我一会儿在这里做一个js fiddel

---

fiddle:

假设shapes数组是一个DOM元素数组，我认为您可以使用类似的方法，为每个形状设置一个悬停事件处理程序，然后在传递给悬停事件处理程序的每个函数中，迭代shapes数组，如果它不是您悬停的数组，则执行动画

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

或者它可能更干净，具有本地功能：

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

---

编辑：我看到您现在已经在问题中添加了实际的代码（因为我写了我的答案），而shapes不是DOM对象数组（如果您最初披露了这一点会更好），因此显然此代码不会像现在这样工作，但是，希望您能从这段代码中了解到如何迭代所有其他形状，并排除当前悬停的形状，然后使其适应特定的形状数据结构。

假设形状数组是一个DOM元素数组，我认为可以使用类似的方法，为每个形状设置一个悬停事件处理程序，然后在传递给悬停事件处理程序的每个函数中，迭代形状数组，如果不是悬停的形状数组，则执行动画

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

或者它可能更干净，具有本地功能：

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

---

编辑：我看到您现在已经在问题中添加了实际的代码（因为我写了我的答案），而shapes不是DOM对象数组（如果您最初披露了这一点会更好），因此显然此代码不会像现在这样工作，但希望您能从这段代码中了解到如何迭代所有其他形状，并排除当前悬停的形状，然后将其调整为特定的形状数据结构。

您可以使用该方法。not（）：

---

您可以使用方法。not（）

---

我不知道拉斐尔的物体是怎么工作的。。。但是这种语法没有任何动画效果正如在中所看到的，您已经披露了更多关于实际代码的信息（在我写了我的答案之后），您将不得不根据您的特殊需求调整这个概念。您是否理解迭代形状数组并为每个项目启动动画的一般概念，除了与悬停函数中的

this

值匹配的项目外？特别是，如果形状不是DOM对象数组（我不知道它是什么，因为我不知道Raphael），您必须为每个形状获取一个DOM对象，才能为其配置.hover（）事件。raphael对象有自己的.hover（）事件，所以希望这能起作用。（目前正在修复由me refactoring=D引起的一系列语法错误）我不确定Raphael对象是如何工作的。。。但是这种语法没有任何动画效果正如在中所看到的，您已经披露了更多关于实际代码的信息（在我写了我的答案之后），您将不得不根据您的特殊需求调整这个概念。您是否理解迭代形状数组并为每个项目启动动画的一般概念，除了与悬停函数中的

this

值匹配的项目外？特别是，如果形状不是DOM对象数组（我不知道它是什么，因为我不知道Raphael），您必须为每个形状获取一个DOM对象，才能为其配置.hover（）事件。raphael对象有自己的.hover（）事件，所以希望这能起作用。（目前正在修复由我重构引起的一系列语法错误=D），但我可以=p。这些是raphael对象，不是DOM元素。@TheLindyHop好的，我已经编辑了我的答案。目前我无法访问jsfiddle.net，-.not（）方法对您有效吗？但是我可以=p。这些是raphael对象，不是DOM元素。@TheLindyHop好的，我已经编辑了我的答案。我目前无法访问jsfiddle.net，-.not（）方法对您有用吗？