jQuery 애니메이션이 계속 반복됩니다.

Question

반복되는 jQuery 애니메이션에 문제가있어 stop()에 대한 일반적인 조언이 도움이되지 않는 것 같습니다.

이미지가 있습니다. 사용자가 이미지 위로 마우스를 가져 가면 오른쪽에서부터 흰색 투명 투명한 오버레이를 삽입하고 싶습니다. 사용자가 마우스를 떼면 사라져야합니다.

코드는 부분적으로 작동하지만 사용자가 이미지의 왼쪽 (예 : 오버레이에서 멀리)에 마우스를 올리거나 내릴 때만 작동합니다. 사용자가 표시하는 동안 오버레이 위로 마우스를 가져 가면 mouseout 이벤트로 계산되는 것으로 보이며 원하는 애니메이션이 아닌 애니메이션을 트리거합니다. 이렇게되면 애니메이션이 반복되기 시작합니다.

html로 :

<img src="Crowded_bookshelf.png" height="367" width="367" id="theImage"> 
<div id="overlay1"></div> 

CSS의 :

#theImage { 
    border-radius: 184px; 
} 
#overlay1 { 
    height:400px; 
    width:240px; 
    background-color:white; 
    opacity:0.9; 
    position:absolute; 
    left:400px; 
    top:60px; 
} 

JQuery와 : 어떤 도움을 크게 감상 할 수

 $('#theImage').hover(
     function() { 
      $('#overlay1').animate(
       { 
        left: '190px' 
       }, 
       1000 
      ); 
     }, 
     function() { 
      $('#overlay1').animate(
       { 
        left: '400px' 
       }, 
       1000 
      ); 
     } 
    ); 

.

Answer 1

문제는 이미지 위에 마우스를 적용하면 div가 이미지를 오버레이 할 때 더 이상 마우스를 이미지 위에 올려 놓지 않고 밖으로 나간다는 것입니다.

당신은 컨테이너 사업부 모두이 된 div를 넣어해야 할 일은, 그

즉

<div id="container"> 
    <img src="Crowded_bookshelf.png" height="367" width="367" id="theImage"> 
    <div id="overlay1"></div> 
</div> 

에 마우스 이벤트를 적용 :

$('#container').hover(...);