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。正常功能它可以正常工作，但是（如果我假设正确），因为我在＆＃39; elem＆＃39;它拒绝工作。对此有什么修正？

Answer 1

elem.delay(pauseDuration*i).passedFunction();尝试调用名为passedFunction()的jQuery插件，该插件不存在。

一种解决方案可能是传递如下所示的回调函数，您可能还必须在elem = elem.next();循环中移动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();
}

假设两个动画都设置为在同一个队列上运行（默认情况下它们都是这样），那么这应该可以正常工作。

将动画功能作为参数传递

2 个答案: