MooTools Tween百分比

Question

是否可以在MooTools中調用百分比元素？

var slide = new Fx.Tween($('slide_box')); 
$('next_slide').addEvent('click',function(){ 
    slide.start('left', '-100%'); 
}); 

但是，此代碼補間一個元素100px，而不是百分比。

Answer 1

也許我忽略了一些明顯的東西，但-100％不只是「0px」？

如果元素在相對定位的DIV內的絕對左側位置爲600px，那麼將該元素左移100％將導致位置爲0,0（假設頂部元素爲0）。

你可以用變體來達到這個目的。

$('slide_box').morph({'left':'0px'}); 

如果您希望通過100％以外，那麼你可以使用一個簡單的計算，找出所需要的偏移量的值的要素移位。

var shiftPercentage = 70; 
var elementPosition = $('slide_box').getPosition().x; 
var resultingShiftAmount = (elementPosition/100)*shiftPercentage; 
$('slide_box').morph({'left':resultingShiftAmount+'px'}); 

當然，這取決於如果你想它的正面或負面的轉變，使變量「resultingShiftAmount」積極或消極的。

希望這會有所幫助。

進一步的編輯，似乎吐溫類有一個選項稱爲'單位'。我想這可能不會像你期望的那樣工作。

var slide = new Fx.Tween($('slide_box'),{unit:'%'}); 
slide.start('left','-100%'); 

上面的代碼段將變換元件「slide_box」相對於其包含元素-100％的位置（至少在我的簡短的測試，這似乎是的情況下）。例如 - 包含的元素坐在0px，0px的位置設置爲相對。在這個元素中有一個絕對定位的元素在500px，0px。正如我所看到的，如果你要在這個絕對定位的元素上使用上面的代碼，它將完全從包含元素的0,0減去包含元素寬度的100％的位置。

這對我來說似乎有些困惑，但這就是測試顯示的。

祝你好運！

Answer 2

看看基地Fx類，有個設置單位的選項。你的例子可以改寫爲：

$('next_slide').addEvent('click', function(){ 
    new Fx.Tween('slide_box', { 
     unit: '%' 
    }).start('left', -100); 
}); 

你可以看到它的行動here。