jQuery fadeToggle (현재 애니메이션 인 경우 추가 입력 무시)

마우스를 가져 가면 재생 버튼이 페이드 인되는 미리보기가 있습니다. 제 문제는 반복적으로 3 번 말하면 3 번이나 페이드 인하라고 말합니다. 한때 jQuery 함수를 사용했는데, if then 문은 애니메이션이 추가 입력을 무시하면 대략적으로 말합니다.하지만 구문이 그런 일을하는지는 잘 모르겠습니다.jQuery fadeToggle (현재 애니메이션 인 경우 추가 입력 무시)

아이디어가 있으십니까? 고맙습니다!

는 여기 jsFiddle입니다 : http://jsfiddle.net/danielredwood/66FwR/10/

HTML :

<div id="music_right"> 
     <div class="thumbnail" id="paparazzi"> 
      <a class="playback"> 
       <img class="play" src="http://www.lucisz.com/imgs/play.png" /> 
       </a> 
      <audio> 
        <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" /> 
       <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" /> 
       Your browser does not support HTML5 audio. 
      </audio> 
     </div> 
     <div class="thumbnail" id="danceinthedark"> 
      <a class="playback"> 
       <img class="play" src="http://www.lucisz.com/imgs/play.png" /> 
       </a> 
      <audio> 
        <source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" /> 
       <source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" /> 
       Your browser does not support HTML5 audio. 
      </audio> 
     </div> 
     <div class="thumbnail" id="bornthisway"> 
      <a class="playback"> 
       <img class="play" src="http://www.lucisz.com/imgs/play.png" /> 
       </a> 
      <audio> 
        <source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" /> 
       <source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" /> 
       Your browser does not support HTML5 audio. 
      </audio> 
     </div> 
    </div>

자바 스크립트 :

$('.play').hide(); 
$('.thumbnail').hover(function(){ 
    $('.play', this).fadeToggle(400); 
});

출처

2011-04-19 technopeasant

변경

$('.play', this).fadeToggle(400);

http://jsfiddle.net/gaby/66FwR/12/

에서

$('.play', this).stop(true,true).fadeToggle(400);

업데이트 된 바이올린

에 당신은 :animated 선택기를 사용하는 것입니다 언급 문합니다.

이

if ($('.play',this).is(':animated')) 
{ 
// do whatever.. 
}

같이 보일 것입니다하지만 당신이 밖으로 올려 놓으면 버튼은 여전히 페이딩 에있는 동안 때문에 즉, 귀하의 경우에는 작동하지 않습니다, 다음 페이드 아웃은 대기하지 않습니다 재생 버튼은 영원히 계속됩니다 ..

출처

2011-04-19 21:17:15

+1, 내 대답보다 깨끗합니다. –

@Gaby 굉장합니다. 그런 간단한 접근! 함수의 (true, true) 부분을 설명해 주시겠습니까? 내 명명법 부족을 용서하십시오. – technopeasant

@techno : http://api.jquery.com/stop –

이 이벤트의 대기 때문이다. 보통 이렇게 할 방법은 다음과 같습니다.

 
$(".thumbnail").hover(function(){ 
    $(".play", this).stop().animate({opacity:1}, "fast"); 
}, function(){ 
    $(".play", this).stop().animate({opacity:0}, "fast"); 
});

stop()은 소리를냅니다. 모든 애니메이션을 멈추고 jQuery 체인 이후 객체가 멈춘 후에 애니메이션을 호출합니다.

당신은 토글 방법을 얻지 못하지만 jQuery의 애니메이션 메서드에서 얻는 컨트롤 때문에이 방법을 사용하고 있습니다.

출처

2011-04-19 21:16:54 locrizak

jQuery fadeToggle (현재 애니메이션 인 경우 추가 입력 무시)

답변

관련 문제