2009-10-06 5 views
3

토글 페이드 효과가 있지만 버튼을 여러 번 클릭하면 여러 번 페이드 인/페이 아웃됩니다. (따라서 페이드 ID를 20 번 빠르게 누르면 페이드 인/페이 아웃이 반복됩니다.) 애니메이션을 끝내면 어떻게 페이드를 전환 할 수 있도록이 작업을 중단하고 만들 수 있습니까? 나는 현재 값을 얻기과 if 문을 시도했지만 작동하지 않았다 : (*jquery 함수가 여러 번 작동하지 않는 경우

감사

당신은 요소가없는 경우 확인해야
jQuery.fn.fadeToggle = function(speed, easing, callback) { 
    return this.animate({opacity: 'toggle'}, speed, easing, callback); 
}; 



$(document).ready(function() { 
    $('.open').click(function() { 
    $('#fadeMe').next().fadeToggle('slow'); 
    }); 
}); 

답변

6

: 애니메이션, 그래서 .animate를 호출하는 경우 :

<body> 
    <button class="open">open</button><br> 
    <div id="fadeMe">fade me!</div> 
    <style>#fadeMe { 
    width:20em; 
    height:10em; 
    background:black; 
    color:#fff; 
    }</style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
    <script> 
    jQuery.fn.fadeToggle = function(speed, easing, callback) { 
     return this.animate({opacity: 'toggle'}, speed, easing, callback); 
    }; 



    $(document).ready(function() { 
     $('.open').click(function() { 
     var el = $('#fadeMe').next(); 
     if (!el.is(':animated')) { 
      $(el).fadeToggle('slow'); 
     } 
     }); 
    }); 
    </script> 
    </body> 

데모 :. http://jsbin.com/irare

+0

업데이트 된 솔루션. –

+0

Sweet it works :) – PHPNooblet

+0

이 질문에 답합니다. 그러나 아래의 stop() 응답을보십시오.이 상황에서 대부분의 사람들이 원하는 것입니다. – ndp

3

사용 .stop()이 요소의 모든 애니메이션을 중지

.
$('#fadeMe').next().stop().fadeToggle('slow'); 
관련 문제