不同 Array selectorID 中的动画图标

Question

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

我想要：jsfiddle 但是有六个按钮

我将每个 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>

非常感谢您的帮助。

Answer 1

这是一个有效的 fiddle。

那么 $("ani") 将搜索一个 <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);
    });
});

Answer 2

我会让 ani 成为 class 而不是 id，然后像下面那样做 $('.ani').hover(function()....。

注意我正在使用 sudo CSS 因为 none 已发布，但它明白了要点。

请记住，您始终可以通过 class 获取单个元素，也可以使用 eq()。例如，$('.ani:eq(0)').hide(); 会隐藏第一个面板，$('.ani:eq(1)').hide(); 会隐藏第二个面板，等等...

$(document).ready( function(){
    $('.ani').hover(function(){
        var $icon = $( this ).find( ".fa-refresh" );
            $icon.addClass( "icon-animate" );
      
            /* use `mouseout` later instead of a timeout here, unless want the icon to stop spinning after a few seconds of hovering
           
            window.setTimeout( function(){
                $icon.removeClass( "icon-animate" );
            }, 2000 ); 
            */
    });  
  
  $( ".ani" ).mouseout(function() {
      $( this ).find( ".fa-refresh" ).removeClass( "icon-animate" );
  });
});

.ani{
  width:150px;
  height:75px;
  background-color:#cccccc;
  margin-top:15px;
  margin-left:15px;
  float:left;
  padding:5px;
}

.fa-refresh{
  float:right;
  
}



.icon-animate {
    font-size:14px;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 1000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://www.justinaguilar.com/animations/css/animations.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="panel panel-default ani">
<i class="fa fa-refresh"></i> Banana
...
</div>
<div class="panel panel-default ani">
<i class="fa fa-refresh"></i> Blogspot Toko Online
...
</div>
<div class="panel panel-default ani" >
<i class="fa fa-refresh"></i> Apple
...
</div>
<div class="panel panel-default ani">
<i class="fa fa-refresh"></i> Mango
...
</div>
<div class="panel panel-default ani">
<i class="fa fa-refresh"></i> Durian
...
</div>
<div class="panel panel-default ani">
<i class="fa fa-refresh"></i> Pineapple
...
</div>

Answer 3

我想分享我自己的版本。希望你喜欢！

HTML :

<button id="ani1" class='btn btn-success'><i class="icon-refresh"></i> Click Here</button>
<button id="ani2" class='btn btn-success'><i class="icon-refresh"></i> Click Here</button>
<button id="ani3" class='btn btn-success'><i class="icon-refresh"></i> Click Here</button>
<button id="ani4" class='btn btn-success'><i class="icon-refresh"></i> Click Here</button>

CSS :

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

JQUERY :

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

jsfiddle DEMO

不同 Array selectorID 中的动画图标

Animate icon in different Array selectorID

javascript

jquery

jquery-animate