不同 Array selectorID 中的动画图标
Animate icon in different Array selectorID
我有六个 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>
非常感谢您的帮助。
这是一个有效的 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);
});
});
我会让 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>
我想分享我自己的版本。希望你喜欢!
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 );
});
});
我有六个 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>
非常感谢您的帮助。
这是一个有效的 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);
});
});
我会让 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>
我想分享我自己的版本。希望你喜欢!
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 );
});
});