2014-07-09 7 views
1

mouseOver() 또는 mouseOut()에 div가 애니메이션되지 않게하고 싶습니다. 나는 http://jsfiddle.net/UxtJV/610/잠시 후 (예 : 100ms) JS 함수가 자동으로 호출됩니다.

HTML ... 여기

내 코드의 JFiddle입니다 ... 사업부가 자동으로 (계속) 자체 애니메이션 것을 원하는

<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); 
}); 
+1

중복 가능성을 해달라고 http://stackoverflow.com/q/11901074/612920 최고 이 경우에 그것을하는 방법을 알고 ... JS에서 매우 새로운 메신저 때문에 ... – Mansuro

+0

@Mansuro이 중복되지 ... 내가 – user46329

+1

그 질문에 대한 답변을 확인하십시오, 당신은 매개 변수로 전달하는 간격으로 함수를 지속적으로 호출 할 수있는 setInterval 함수를 사용할 수 있습니다 – Mansuro

답변

1

자신을 조정해야합니다. 간격의 타이밍은 타임 아웃의 타이밍보다 짧을 수 없으며 모든 것이 엉망이 될 것입니다. BTW

$(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/

모든

는 가
+0

감사합니다. @ nightingalez! – user46329