30天學會 MooTools 教學(10): Fx.Tween漸變

// 創建一個新的函數
var tweenerFunction  = function() {
    // 選中你要使用漸變的元素
    // 然後加上.tween
    // 最後聲明你要變化到的屬性和值
    $('tweener').tween('width', '300px');
}
 
window.addEvent('domready', function() {
    // 在這裡給一個按鈕添加一個事件
    // 當點擊時初始化這個漸變
    // 並調用我們的漸變函數
    $('tween_button').addEvent('click', tweenerFunction);
});

// 創建一個新函數
var tweenFadeFifty = function() {
    // 在這裡創建你的選擇器
    // 然後添加.fade
    // 最後聲明一個0到1之間的值（0代表不可見，1代表完全可見）
    $('tweener').fade('.5');
}
 
window.addEvent('domready', function() {
    // 在這裡給按鈕添加一個事件
    // 點擊時初始化這個漸變
    // 並調用我們的漸變函數
    $('tween_fade_fifty').addEvent('click', tweenFadeFifty);
});

// 創建一個函數
var tweenHighlight = function(event) {
    // 這裡我們使用了event.target，這是從這個函數中傳過來的參數
    // 這個意思是指「觸發事件的目標（來源）」
    // 由於這個效果應用到觸發事件的元素上面
    // 因此我們不需要再創建選擇器
    // 注意：addEvent將會自動把event對象作為參數傳入這個調用函數
    // ... 非常方便
    event.target.highlight('#eaea16');
}
 
// 創建一個函數
// 你需要傳入一個參數
// 由於這個函數是在一個事件（event）裡面被調用的
// 這個函數將會自動傳入event對象
// 然後你就可以通過.target來引用這個元素
// （event的目標元素）
var tweenHighlightChange = function(item) {
    // 這裡我們不是使用一個顏色，而是添加了一個逗號來分隔第二個
    // 這將設置第一個顏色，然後變化到第二個顏色
    item.target.highlight('#eaea16', '#333333');
}
 
window.addEvent('domready', function() {
    $('tweener').addEvent('mouseover', tweenHighlight);
    $('tweenerChange').addEvent('mouseover', tweenHighlightChange);
});

var tweenerFunction  = function() {
    $('tweener').tween('width', '300px');
}
 
var tweenerGoBack  = function() {
    $('tweener').tween('width', '100px');
}
 
// .fade 也可以接受'out'和'in'作為參數，相當於0和1
var tweenFadeOut = function() {
    $('tweener').fade('out');
}
 
var tweenFadeFifty = function() {
    $('tweener').fade('.5');
}
 
var tweenFadeIn = function() {
    $('tweener').fade('in');
}
 
var tweenHighlight = function(event) {
    event.target.highlight('#eaea16');
}
 
window.addEvent('domready', function() {
    $('tween_button').addEvent('click', tweenerFunction);
    $('tween_reset').addEvent('click', tweenerGoBack);
    $('tween_fade_out').addEvent('click', tweenFadeOut);
    $('tween_fade_fifty').addEvent('click', tweenFadeFifty);
    $('tween_fade_in').addEvent('click', tweenFadeIn);
    $('tweener').addEvent('mouseover',tweenHighlight);
});

window.addEvent('domready', function() {
    // 首先我們把要變化的元素賦值給一個變量
    var newTweenElement = $('newTween');
 
       // 現在我們創建一個動畫事件，然後把這個元素作為參數傳入
       var newTween = new Fx.Tween(newTweenElement);
});

var newTweenSet = function() {
    // 注意"this"的使用
    // 學習如何使用"this"
    this.set('width', '300px');
}

// 首先我們給上面我們看到的那個按鈕添加一個點擊事件
// 然後，不只是僅僅調用這個函數
// 我們調用這個函數並且添加".bind()"
// 然後我們替換掉任何我們要傳遞給函數的
// 現在，在這個"newTweenSet"函數內部，"this"將指向"newTween"
$('netTween_set').addEvent('click', newTweenSet.bind(newTween));

// 這裡是我們的函數
var newTweenSet = function() {
    // 由於我們使用了bind，現在"this"就指向了"newTween"
    // 因此，這裡的相當於是：
    // newTween.set('width', '300px')
    this.set('width', '300px');
}
 
window.addEvent('domready', function() {
    // 首先把我們的元素賦值給一個變量
    var newTweenElement = $('newTween');
 
    // 然後我們new一個FX.Tween，然後賦值給一個變量
    var newTween = new Fx.Tween(newTweenElement);
 
    // 現在添加我們的事件，並綁定newTween和newTweenSet
    $('netTween_set').addEvent('click', newTweenSet.bind(newTween));  
});

// 這將讓寬度（width）從當前已經存在的值變化到300px
newTween.start('width', '300px');
 
// 這將首先設置寬度（width）為100px，然後變化到300px
newTween.start('width', '100px', '300px');