jQuery fadein 정지

Question

다음 스크립트가 있습니다

 <script>
  $(document).ready(function(){
   $("div.mover").hover(function () {
  $("div.hide1").fadeTo("slow", 0.33);

  $("div.hide1").fadeTo("slow", 1);

},function(){
  $("div.hide1").stop();
});
  });
 </script>

 and html page is

<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
<td><div class="mover"><IMG SRC="images/buttons_full_01.png" ></div></td>
 </tr>
 <tr>
<td><div class="mover"><IMG SRC="images/buttons_full_02.png"></div></td>
 </tr>
<tr>
<td><div class="mover"><IMG SRC="images/buttons_full_03.png"></div></td>
</tr>
</table>

내 기능은 버튼의 마우스에 대한 배경을 퇴색시키는 것입니다.

그러나 모든 버튼 위로 마우스를 마우스로 가져 가서 마우스를 떠난 후 버튼 애니메이션은 모든 트랜잭션을 완료 할 때까지 계속 유지됩니다.

내가 원하는 것은 : 마우스를 떠날 때 버튼 애니메이션이 $ ( "div.Hide1")로 온다. Fadeto ( "slow", 1); 그리고 멈 춥니 다

Answer 1

마우스 포인터가 1 초 (또는 세 번째) "Mover"Div로 끌리지 않는 한 초기 기능이 잘 작동합니다. 이런 일이 발생하면 다음과 같이 여러 애니메이션을 대기 할 수 있습니다.

mover1.hover-over()
mover2.hover-over()

기본적으로 호출 stop 두 번째 애니메이션 만 끝나는 애니메이션은 현재 애니메이션 만 종료합니다. 두 번째 발동기에 대기 한 애니메이션이 아니라 첫 번째 발동기를 위해 시작된 애니메이션.

호출 할 때 애니메이션 대기열을 지우면서 추가 애니메이션이 실행되는 것을 방지 할 수 있습니다. stop, 선택적 매개 변수를 수락하는 것 clearQueue:

$(document).ready(function(){     
    $("div.mover").hover(function () {
        $("div.hide1").fadeTo("slow", 0.33).fadeTo("slow", 1);
    }, function(){
        // Added stop parameters and added an additional fadeTo,
        // to make sure we get back to 100% opacity.
        $("div.hide1").stop(true).fadeTo("slow", 1);
    });
});