GreenSock函数参数

Question

我有两个函数调用鼠标事件：

function menuBtnOver(e){
    var b = e.data;
    b.setPosition(b.x, b.y+5);
}

function menuBtnOut(e){
    var b = e.data;
    b.setPosition(b.x, b.y-5);
}

以及：

setPosition:function(x, y) {
        if(!x) x = 0;
        if(!y) y = 0;
        this.element.css("left", x);
        this.element.css("top", y);
    }

元素属性是一个jQuery对象。它的工作正常，但我想动画这个。我怎样才能用TweenLite做到这一点呢？我试过以下代码：

function menuBtnOver(e){
    TweenLite.to(e.data, 1, {top:500});
}

此外，还有：

function menuBtnOver(e){
    TweenLite.to(e.data.getElement(), 1, {top:500});
}

还有很多其他的组合但都没有用。只有在部分工作的方法上才是这样：

function menuBtnOver(e){
    TweenLite.to(e.data, 1, {y:400, onUpdate:e.data.setPosition, onUpdateParams:[e.data.x, e.data.y]});
}

但它只在拳头按钮上工作，当我翻滚和(在任何时间之后)展开，它直接移动到给定的位置(没有吐温)，然后吐温永远给我错误每次(至少-我不能得到任何错误或任何其他尝试)。

未定义TypeError:无法读取未定义的属性“css”

at：this.element.css("left", x);

更新

我弄明白了到底是怎么回事。我已经更改了代码：

function menuBtnOver(e){
    TweenLite.to(e.data, 1, {y:400, onUpdate:e.data.setPosition, onUpdateParams:[e.data.x, e.data.y], onUpdateScope:e.data});
}

但问题在于，我设置为e.data.y/x的update函数参数不是动态引用，始终保持为来自menuBtnOver状态的确切值。因此，如果我将setPosition函数更改为：

setPosition:function(x, y) {
    if(!x) x = 0;
    if(!y) y = 0;
    this.element.css("left", this.x);
    this.element.css("top", this.y);
}

但显然这不是我想做的。所以我可以选择做这样的事情：

 MenuButton.prototype = {
    setPosition:function(x, y) {
        if(!x) x = 0;
        if(!y) y = 0;
        this.x = x; this.y = y;
        this.element.css("left", x);
        this.element.css("top", y);
    },
    updatePosition:function(){
        this.element.css("left", this.x);
        this.element.css("top", this.y);
    }
}

function menuBtnOver(e){
    TweenLite.to(e.data, 1, {y:400, onUpdate:e.data.updatePosition, onUpdateScope:e.data});

}

或者以类似的方式定义外部更新函数。问题仍然没有改变，所以是否有一个简单的方法来做这个更简单的。GS有任何机械装置来实现这个过程的自动化吗？

感谢大家的关注:)

Answer 1

this in setPosition指的是该函数，而不是onClick事件的this。

您需要将this传递给setPosition。在下面的示例中，我在函数self中将其作为setPosition传递。

function menuBtnOver(e){
  var b = e.data;
  b.setPosition(this, b.x, b.y+5);

}

function menuBtnOut(e){
  var b = e.data;
  b.setPosition(this, b.x, b.y-5);

}和：

setPosition:function(self, x, y) {
    if(!x) x = 0;
    if(!y) y = 0;
    self.element.css("left", x);
    self.element.css("top", y);
}

这总是引用被调用的函数。你能读到她的故事。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

因此，您可以将this作为变量传递到函数中。