如何对数组中存储的元素进行动画处理？除了我悬停的那一个？

Question

这就是我所拥有的：

    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

： http://jsfiddle.net/G5mTx/1/< /a>

Answer 1

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

编辑：我看到你现在已经在你的问题中添加了实际的代码（因为我写了我的答案）并且形状不是 DOM 对象的数组（它如果您最初披露了这一点，那就太好了）所以显然这段代码不会完全按原样工作，但希望您可以从这段代码中得到关于如何迭代所有其他形状并仅排除当前形状的想法悬停在上面，然后您可以将其调整为您的特定形状数据结构。

Answer 2

您可以使用方法.not()：

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