アニメーション関数をパラメータとして渡す

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(); 
} 

を両方のアニメーションが、これは正常に動作する必要があります（これらはデフォルトでとなります）同じキューで動作するように設定されていると仮定すると：あなたは別に、それを呼び出す必要があります。