更新

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

element属性是一个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的更新函数的参数不是动态引用，并始终保持为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

setPosition中的

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

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

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作为变量传递给函数。

GreenSock，补间函数参数

更新

1 个答案: