애니메이션 함수를 매개 변수로 전달

Question

큰 함수에 매개 변수로 fadeIn/fadeOut/etc 함수를 전달하려하지만 작동하지 않습니다. 이것은 내가 그것을 시작하는 방법입니다

$("#buttFadeOut").click(function() { 
    $('#lista').fade(function() { 
     fadeOut(500); 
    }, 150); 
}); 

을 그리고가는 곳은 다음과 같습니다.

$.fn.fade = function(passedFunction, pauseDuration){ 
var elem = this.children().first(); 
var len = elem.siblings().length; 
for (var i=0;i<=len;i++) { 
    var fun = passedFunction(); 
     elem.delay(pauseDuration*i).passedFunction(); 
    } 
    elem = elem.next(); 
} 

는 그 elem.delay (...)를 말하는 오류가 passedFunction 함수 아니라, $ .isFunction (passedFunction)을 사용하여 검사하면 true를 반환합니다. 정상적인 기능으로는 작동하지만 (필자가 올바르게 가정한다면) 'elem'에서 실행하기 때문에 작동하지 않습니다. 그 모든 수정?

Answer 1

elem.delay(pauseDuration*i).passedFunction(); 거기에없는 passedFunction()이라는 jQuery 플러그인을 호출하려고합니다.

하나 개의 솔루션은 다음과 같은 콜백 함수를 전달할 수, 당신은 또한 for 루프

$("#buttFadeOut").click(function() { 
 
    $('#lista').fade(function(el) { 
 
    $(el).fadeOut(500); 
 
    }, 250); 
 
}); 
 

 

 
$.fn.fade = function(passedFunction, pauseDuration) { 
 
    var elem = this.children().first(); 
 
    var len = elem.siblings().length; 
 
    for (var i = 0; i <= len; i++) { 
 
    elem.delay(pauseDuration * i).promise().done(function() { 
 
     passedFunction(this); 
 
    }); 
 
    elem = elem.next(); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="buttFadeOut">Test</button> 
 
<ul id="lista"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
</ul>

Answer 2

passedFunction()은 익명 기능에 대한 참조입니다. delay() 호출로 인해 jQuery 객체에서 호출 할 수 없습니다. 별도로 호출해야합니다

$.fn.fade = function(passedFunction, pauseDuration) { 
    var elem = this.children().first(); 
    var len = elem.siblings().length; 
    for (var i = 0; i <= len; i++) { 
     elem.delay(pauseDuration * i); 
     passedFunction(); 
    } 
    elem = elem.next(); 
} 

다음이가 잘 작동합니다 모두 애니메이션은 (그들이 기본적으로됩니다) 같은 큐에서 작동하도록 설정되어 있다고 가정.