Уроки PHP, Mootools, JavaScript, ActionScript, HTML, CSS

//создаем функцию
var tweenerFunction  = function() {

        //выбираем элемент, над которым будем издеваться
        //и добавляем к нему .tween
        //а в качестве атрибутов добавляем свойство, которое будет изменяться
        //и значение на которое это свойство нужно мягко изменить
	$('tweener').tween('width', '300px');

}
 
window.addEvent('domready', function() {
        //тут мы добавляем прослушку на определенное событие (в нашем случае click)

        //к кнопке, которая должна вызвать эффект
        $('tween_button').addEvent('click', tweenerFunction);

});

<button id="tween_button">растянуть до 300 px</button>

//создаем функцию
var tweenFadeFifty = function() {

       //выбираем объект
       //добавляем к нему .fade
       //и задаем значение между 0 и 1, к которому нужно привести прозрачность элемента
       //(0 - невидимка, 1 - полный видимка)
	$('tweener').fade('.5');

}
 
window.addEvent('domready', function() {
        //тут мы добавляем прослушку на определенное событие (в нашем случае click)

        //к кнопке, которая должна вызвать эффект
        $('tween_fade_fifty').addEvent('click', tweenFadeFifty);

});

<button id="tween_fade_fifty">Снижаем видимость до 50%</button>

//создаем функцию
var tweenHighlight = function(event) {

        //тут мы будем использовать конструкцию, которую пока еще не использовали - event.target
        //которая будет передаваться как параметр функции
        //на человеческом языке это звучит как "цель события"
        //а так как эффект применим к тому же элементу, к которому прикреплена прослушка на событие
        //не нужно будет снова создавать селектор.
        //обратите внимание, что addEvent автоматически передаст объект события в качестве параметра

        //в функцию, которую вызывает... оч полезно  
	event.target.highlight('#eaea16');
}
 
//создаем вторую функцию

//тут нужно передать сразу параметр
//так как функция будет вызываться при определенном событии
//и ей в параметры автоматически припишут событие (как в функции выше)
//а элемент можно вызывать с помощью конструкции .target
//(цель события)
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);

});

<div id="newTween"><!-- это элемент, к которому применим новый Tween эффект--></div>
<!-- а это кнопка, которая очень скоро сыграет свою главную роль -->

<button id="netTween_set">Назначить</button>

var newTweenSet = function() {
        //обратите внимание на использование ключевого слова "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');
 
    //потом создаем новый эффект FX.Tween и назначаем его своей собственной переменной
    var newTween = new Fx.Tween(newTweenElement);

 
    //а сейчас добавляем наше событие, в котором связываем newTween и newTweenSet с помощью bind
	$('netTween_set').addEvent('click', newTweenSet.bind(newTween));

});

//эта строчка изменит текущее значение свойства width на 300px
newTween.start('width', '300px');

 
//эта строчка установит свойство width на 100px, потом сделает плавный переход на 300px
newTween.start('width', '100px', '300px');