我如何动画元素存储在一个数组?除了我徘徊在上面的那个

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

本文关键字：一个 数组 除了我 徘徊 在上面 何动画 动画 元素 存储      更新时间：2023-09-26

我有:

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

我使用拉斐尔.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/

假设形状数组是一个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");
        });
   });

编辑:我看到你现在实际的代码添加到你的问题(因为我写的答案)和形状不是DOM对象数组(就好了如果你有透露,最初)显然这段代码完全行不通,但希望你可以从这段代码如何遍历所有其他形状和排除当前一个盘旋,你可以适应您的特定形状的数据结构。

您可以使用。not()方法:

jQuery.each(shapes, function(i) { 
   $(this).hover(function(event) {
     shapes.not($(this)).animate({
相关文章：