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。