我不希望div在鼠标事件 mouseOver()或 mouseOut()上制作动画。我希望div自动动画(连续)......
这是我的代码的JFiddle ... http://jsfiddle.net/UxtJV/610/
HTML
<div class=circle1></div>
CSS
.circle1 {
position:absolute; top:50px; left:50px;
width: 0px; height: 0px;
border:1px solid red;
padding:20px;
border-radius:50%;
}
JS
$(".circle1").mouseover(function() {
$(this).animate({top:"0", left:"0", width:"100px", height:"100px", opacity: 0}, 200);
});
$(".circle1").mouseout(function() {
$(this).animate({top:"50px", left:"50px", width:"0", height:"0", opacity: 1}, 200);
});
答案 0 :(得分:1)
您需要自己调整时间。间隔的时间不能短于超时的时间,否则整个事情就会变得混乱。
$(document).ready(function(){
setInterval(function(){
$(".circle1").animate({top:"0", left:"0", width:"100px", height:"100px", opacity: 0}, 200);
setTimeout(function(){
$(".circle1").animate({top:"50px", left:"50px", width:"0", height:"0", opacity: 1}, 200);
},250);
},500);
});
顺便说一下,这是你的小提琴http://jsfiddle.net/UxtJV/615/
一切顺利