传递一个动画函数作为参数

Passing an animation function as a parameter

本文关键字：函数 动画 参数 一个      更新时间：2023-09-26

我试图将fadeIn/fadeOut/等函数作为参数传递给更大的函数，但它不起作用。我是这样初始化它的:

$("#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(…). passsedfunction不是一个函数，但如果我检查它与$. isfunction (passsedfunction)它返回true。正常的功能，它的工作，但(如果我假设正确)，因为我在'elem'上运行它拒绝工作。有什么解决办法吗?

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>

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

假设两个动画都被设置为在同一个队列上操作(默认情况下是这样)，那么这应该可以正常工作。

相关文章：