我想在用户悬停时在div元素上显示一些动画效果。有人可以为我提供代码片段吗?
<div id="myDiv" class="c1"></div>
js.code
$('#myDiv').hover(function(){
//after each 400ms
//when mouse over #myDiv class should increment from c1 > c2 > c3 > c4 >c5
//acutally its from cn > cn+1
}, function(){
//after each 400ms
//when mouse out #myDiv class should decrement from c5 > c4 > c3> c2 > c1
//actuall its from cn > cn-1
});
答案 0 :(得分:0)
试试这段代码:
<script type="text/javascript">
$(document).ready(function(){
$('#myDiv').hover(function(){
//after each 400ms
//when mouse over #myDiv class should increment from c1 > c2 > c3 > c4 >c5
//acutally its from cn > cn+1
$(function() {
var $target = $('#myDiv');
var classes = ['c1','c2', 'c3', 'c4', 'c5'];
var current = 0;
setInterval(function() {
if (current==4){
clearInterval();
}
else{
$target.removeClass(classes[current]);
current = (current+1)%classes.length;
$target.addClass(classes[current]);
}
}, 400); // 1500 ms loop
});
}, function(){
$(function() {
var $target = $('#myDiv');
var classes = ['c5', 'c4', 'c3', 'c2', 'c1'];
var current = 0;
setInterval(function() {
if (current==4){
clearInterval();
}
else{
$target.removeClass(classes[current]);
current = (current+1)%classes.length;
$target.addClass(classes[current]);
}
}, 400); // 1500 ms loop
});
});
});
</script>
这是jfiddle: http://jsfiddle.net/xDSaX/
你现在只需要设置你想要的类......