使用jQuery编写插件函数

Question

嘿伙计，我有以下功能：

$.fn.slideOut = function(speed,dir) { 
        this.animate({
            dir: '-1000px'
        }, speed);
    };

但方向（dir）没有结转，也没有给我一个错误。

我这样称呼它： $('#element').slideOut(500,'top');

所以我的问题=为什么它没有动画？ ：（

Answer 1

您不能在对象文字属性初始值设定项的左侧（名称）侧使用变量，您所拥有的实际上是属性名称“dir”。你必须这样做：

$.fn.slideOut = function(speed,dir) { 
    var opts = {};
    opts[dir] = '-1000px';
    this.animate(opts, speed);
};

有点偏离主题，但可能值得指出插件功能不会链接。除非您有充分的理由不这样做，否则请返回this以获取可链接性（在这种情况下，您可以返回animate返回的内容，因为animate返回this）：

$.fn.slideOut = function(speed,dir) { 
    var opts = {};
    opts[dir] = '-1000px';
    return this.animate(opts, speed);
};

Answer 2

如果要使用变量属性名称，则不能使用对象文字。首先必须创建对象，然后使用“数组访问”语法设置属性：

$.fn.slideOut = function(speed,dir) {
    var options = {};
    options[dir] = '-1000px';
    this.animate(options, speed);
};

Answer 3

你正在打电话

this.animate({
  dir: '-1000px'
}

在你的插件中。它不使用作为参数接收的那个是正常的。