Пример 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) |