使用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]}); 
} 

但它只能在拳頭按鈕工作的時候翻轉和（之後的任何時間）的推出，它直接移動到給定位置（無吐溫），然後將吐溫永遠不會給我錯誤每次（至少 - 我無法得到任何錯誤或任何其他嘗試）。

Uncaught TypeError: Cannot read property 'css' of undefined

在：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 tween是否有任何機制來實現這一過程的自動化？

感謝大家的關注:)

Answer 1

this在被的setPosition指的是功能，而不是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); 
} 

這總是refernces其中被稱爲功能。因爲你可以閱讀關於她的信息。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

所以你可以通過this作爲一個變量的函數。