Javascript 在不同的数组选择器ID中设置图标动画

我有六个选择器，当指针悬停在每个选择器上时，需要分别设置它们的动画。我正在尝试使用数组，但它不起作用

我想进去，但有六个按钮

我将每个SelectorID放置在div中。因此，当悬停时，它会根据哪个ID的指针位于悬停位置设置动画，如下所示：

<div class="panel panel-default" id="ani1">
<i class="fa fa-refresh"></i> Banana
...
</div>
<div class="panel panel-default" id="ani2">
<i class="fa fa-refresh"></i> Blogspot Toko Online
...
</div>
<div class="panel panel-default" id="ani3">
<i class="fa fa-refresh"></i> Apple
...
</div>
<div class="panel panel-default" id="ani4">
<i class="fa fa-refresh"></i> Mango
...
</div>
<div class="panel panel-default" id="ani5">
<i class="fa fa-refresh"></i> Durian
...
</div>
<div class="panel panel-default" id="ani6">
<i class="fa fa-refresh"></i> Pineapple
...
</div>

香蕉
...
东京在线博客
...
苹果
...
芒果
...
榴莲
...
菠萝
...

以下是脚本：

<script>
$(document).ready( function(){
    var ani=array("#ani1","#ani2","#ani3","#ani4","#ani5","#ani6");
    $("ani").hover(function(){
        var $icon = $( this ).find( ".fa-refresh" ),
            animateClass = "icon-animate";
            $icon.addClass( animateClass );
            window.setTimeout( function(){
                $icon.removeClass( animateClass );
            }, 2000 );
    });   
});
</script>

$（文档）.ready（函数（）{
var ani=数组（“ani1”、“ani2”、“ani3”、“ani4”、“ani5”、“ani6”）；
$（“ani”）.hover（函数（）{
var$icon=$（this.find（“.fa refresh”），
animateClass=“icon animate”；
$icon.addClass（animateClass）；
setTimeout（函数（）{
$icon.removeClass（animateClass）；
}, 2000 );
});   
});

非常感谢您的帮助。

这是一份工作清单

嗯，

$（“ani”）

将搜索一个

对象，要搜索您的数组，请改用

$（ani）

另外，javascript中的数组是使用

myArray=[elem1，elem2..]

格式定义的

另外，您的

setTimeout（）中存在范围问题。

在您的情况下，您的代码应该如下所示：

$(document).ready(function () {
    var ani = ["#ani1", "#ani2", "#ani3", "#ani4", "#ani5", "#ani6"];
    ani = ani.join(","); //#any1,any2,any3..
    $(ani).hover(function () {
        var $icon = $(this).find(".fa-refresh"),
            animateClass = "icon-animate";
        $icon.addClass(animateClass);
        (function (icon, animateClass) {
            window.setTimeout(function () {
                icon.removeClass(animateClass);
            }, 2000);
        })($icon, animateClass);
    });
});

这是一张工作票

嗯，

$（“ani”）

将搜索一个

对象，要搜索您的数组，请改用

$（ani）

另外，javascript中的数组是使用

myArray=[elem1，elem2..]

格式定义的

另外，您的

setTimeout（）中存在范围问题。

在您的情况下，您的代码应该如下所示：

$(document).ready(function () {
    var ani = ["#ani1", "#ani2", "#ani3", "#ani4", "#ani5", "#ani6"];
    ani = ani.join(","); //#any1,any2,any3..
    $(ani).hover(function () {
        var $icon = $(this).find(".fa-refresh"),
            animateClass = "icon-animate";
        $icon.addClass(animateClass);
        (function (icon, animateClass) {
            window.setTimeout(function () {
                icon.removeClass(animateClass);
            }, 2000);
        })($icon, animateClass);
    });
});

---

我会将

ani

作为一个类而不是id，然后只需执行

$（'.ani'）。悬停（function（）…

，如下所示

请注意我使用的是sudo

CSS

，因为没有发布任何内容，但它能让人明白这一点

请记住，您也可以使用

eq（）

按类获取单个元素。例如，

$（'.ani:eq（0）'）.hide（）；

将隐藏第一个面板，

$（'.ani:eq（1）'）.hide（）；

将隐藏第二个面板，等等

$（文档）.ready（函数（）{
$（'.ani'）.hover（函数（）{
var$icon=$（this.find（“.fa refresh”）；
$icon.addClass（“图标动画”）；
/*稍后使用'mouseout'代替此处的超时，除非您希望图标在悬停几秒钟后停止旋转
setTimeout（函数（）{
$icon.removeClass（“图标动画”）；
}, 2000 ); 
*/
});  
$（“.ani”）.mouseout（函数（）{
$（this.find（“.fa refresh”）.removeClass（“图标动画”）；
});
})；

.ani{
宽度：150px；
高度：75px；
背景色：#中交；
边缘顶部：15px；
左边距：15px；
浮动：左；
填充物：5px；
}
.fa刷新{
浮动：对；
}
.图标动画{
字体大小：14px；
-webkit动画名称：spin；
-webkit动画持续时间：1000ms；
-webkit动画迭代计数：无限；
-webkit动画计时功能：线性；
-moz动画名称：spin；
-moz动画持续时间：1000ms；
-moz动画迭代次数：无限；
-moz动画计时功能：线性；
-ms动画名称：旋转；
-ms动画持续时间：1000ms；
-ms动画迭代次数：无限；
-ms动画计时功能：线性；
动画名称：旋转；
动画持续时间：1000ms；
动画迭代次数：无限；
动画计时功能：线性；
}
@-ms关键帧旋转{
从{-ms变换：旋转（0度）；}
到{-ms变换：旋转（360度）；}
}
@-moz关键帧旋转{
从{moz变换：旋转（0度）；}
到{moz变换：旋转（360度）；}
}
@-webkit关键帧旋转{
从{-webkit变换：旋转（0度）；}
到{-webkit变换：旋转（360度）；}
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}

香蕉
...
东京在线博客
...
苹果
...
芒果
...
榴莲
...
菠萝
...

我会将

ani

作为一个类而不是id，然后只需执行

$（'.ani'）。悬停（function（）…

，如下所示

请注意我使用的是sudo

CSS

，因为没有发布任何内容，但它能让人明白这一点

请记住，您也可以使用

eq（）

按类获取单个元素。例如，

$（'.ani:eq（0）'）.hide（）；

将隐藏第一个面板，

$（'.ani:eq（1）'）.hide（）；

将隐藏第二个面板，等等

$（文档）.ready（函数（）{
$（'.ani'）.hover（函数（）{
var$icon=$（this.find（“.fa refresh”）；
$icon.addClass（“图标动画”）；
/*稍后使用'mouseout'代替此处的超时，除非您希望图标在悬停几秒钟后停止旋转
setTimeout（函数（）{
$icon.removeClass（“图标动画”）；
}, 2000 ); 
*/
});  
$（“.ani”）.mouseout（函数（）{
$（this.find（“.fa refresh”）.removeClass（“图标动画”）；
});
})；

.ani{
宽度：150px；
高度：75px；
背景色：#中交；
边缘顶部：15px；
左边距：15px；
浮动：左；
填充物：5px；
}
.fa刷新{
浮动：对；
}
.图标动画{
字体大小：14px；
-webkit动画名称：spin；
-webkit动画持续时间：1000ms；
-webkit动画迭代计数：无限；
-webkit动画计时功能：线性；
-moz动画名称：spin；
-moz动画持续时间：1000ms；
-moz动画迭代次数：无限；
-moz动画计时功能：线性；
-ms动画名称：旋转；
-ms动画持续时间：1000ms；
-ms动画迭代次数：无限；
-ms动画计时功能：线性；
动画-n
.icon-refresh-animate {
    animation-name: rotateThis;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
} 
@keyframes rotateThis {
    from { transform: scale( 1 ) rotate( 0deg );   }
    to   { transform: scale( 1 ) rotate( 360deg ); }
}

$( document ).ready( function($) { 
    var custom_timeout = ( function() {
    var timers = {};
    return function ( callback, ms, uniqueId ) {
        if ( !uniqueId ) {
            uniqueId = "Don't call this twice without a uniqueId";
        }
        if ( timers[uniqueId] ) {
            clearTimeout ( timers[uniqueId] );
        }
        timers[uniqueId] = setTimeout( callback, ms );
      };
    })();
    //#ani1,#ani2,#ani3,#ani4,#ani5,#ani6
    $(".btn-success").mouseover(function(){ 
        $(".btn-success").find( ".icon-refresh" ).removeClass( "icon-refresh-animate" );
        var $icon = $( this ).find( ".icon-refresh" );
        var animateClass = "icon-refresh-animate"; 
        $icon.addClass( animateClass );  
        // setTimeout is to indicate some async operation
        custom_timeout( function() {
            $icon.removeClass( animateClass );
        }, 2000 );

    }).mouseleave (function(){
        custom_timeout( function() {
            $(".btn-success").find( ".icon-refresh" ).removeClass( "icon-refresh-animate" );
        }, 200 );
    });  
});