Пример 1.Постепенно исчезает | Постепенно появляется Контент
js-код window.addEvent('domready', function() { $('clickMe1').addEvent('click', function(e) { $('fadeDiv').tween('opacity', 0); e.stop(); }); $('clickMe2').addEvent('click', function(e) { $('fadeDiv').tween('opacity', 1); e.stop(); }); }); html-код <a href="#" id="clickMe1">Постепенно исчезает</a> | <a href="#" id="clickMe2">Постепенно появляется</a> <div id="fadeDiv">Контент</div> Пример 2.Контент
комментарий Serg_pnz
Обратите внимание, что в коде страницы в стилях на слой мы устанавливаем свойства в соответствии со спецификацией
#morphDiv { ... border: solid 5px #1587b1; ... }а в скрипте используем прямое обращение к цвету или толщине рамки ... borderWidth: 5, borderColor: '#1587b1' ... js-код window.addEvent('domready', function() { $('morphDiv').set('morph', { duration: 2000 }); $('clickMe3').addEvent('click', function(e) { $('morphDiv').morph({ color: '#000', backgroundColor: '#fff', width: 400, height: 50, borderWidth: 10, borderColor: '#ff9900' }); e.stop(); }); $('clickMe4').addEvent('click', function(e) { $('morphDiv').morph({ color: '#fff', backgroundColor: '#000', width: 300, height: 200, borderWidth: 5, borderColor: '#1587b1' }); e.stop(); }); }); html-код <a href="#" id="clickMe3">Морфинг 1</a> | <a href="#" id="clickMe4">Морфинг 2</a> <div id="morphDiv">Контент</div> СсылкиСкачать пример (zip, 30 kb) |