Медленное исчезновение блока
Всем добрый день. У меня на сайте есть flash заставка, которую я вставлял таким образом (прошу за костыли не ругать)
</head> <?php $session = JFactory::getSession(); $first = $session->get('first', 1); if ($first){ ?> <style type="text/css"> * { margin: 0px; padding: 0px; } html{ overflow:hidden; } #new2012{ position:absolute; z-index:10000; height: 100%; width:100%; background:#fff; opacity: 0.5; } #new2012wrap{ position:absolute; top:0; right:0; width:100%; z-index:9999; background:#fff; opacity: 0.5; } </style> <script type="text/javascript"> window.addEvent('domready', function() { resizeflash(); window.onresize= resizeflash; }); function resizeflash() { var elwrap = document.getElementById('new2012wrap'); var elclose = document.getElementById('close'); var el = document.getElementById('new2012'); var w = getClientWidth(); var h = getClientHeight(); var w = getClientWidth(); var fl = document.getElementById('fl'); fl.setAttribute("width", w); fl.setAttribute("height", h); elclose.style.left = (w-elclose.clientWidth)/2+'px'; elwrap.style.left = '0px'; el.style.left = '0px'; elwrap.style.width = w+'px'; elwrap.style.height = h+'px'; el.style.width = w+'px'; el.style.height = h+'px'; } function getClientHeight() { return document.compatMode=='CSS1Compat' ? (document.documentElement.clientHeight):document.body.clientHeight; } function getClientWidth() { return document.compatMode=='CSS1Compat' ? document.documentElement.clientWidth:document.body.clientWidth; } function closeblock() { var b = document.getElementsByTagName('html'); b[0].style.overflow = 'hidden'; var elwrap = document.getElementById('new2012wrap'); elwrap.style.display = 'none'; } </script> </head> В body <?php if ($first){ ?> <div id="new2012wrap"> <div id="new2012"> <embed type="application/x-shockwave-flash" width="100%" height="100%" src="templates/<?php echo $this->template ?>/img/intro.swf" quality="best" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed> </div></div> <script type="text/javascript"> var elwrap = document.getElementById('new2012wrap'); var el = document.getElementById('new2012'); var w = getClientWidth(); var h = getClientHeight(); elwrap.style.width = w+'px'; elwrap.style.height = h+'px'; el.style.width = w+'px'; el.style.height = h+'px'; </script> <?php } $session->set('first', 0); ?> В последнем кадре флешка отправляет javascript команду closeblock() и после проигрывания блок успешно закрывается и появляется сам сайт, НО сайт появляется резко, нужно чтобы блок сначала менял свою прозрачность до 0, а только потом закрывался. Какая функция мне поможет это сделать? |
el.style.opacity - меняем скриптом от 1 до 0. Поищите готовые функции или библиотеки для анимации. Если mootools подключается - можно его возможности использовать.
С мутулзом давно не работал, код может не работать: $(elwrap).set('tween',{ duration: 500 }); $(elwrap).tween('opacity', 0); http://www.mootorial.com/wiki/mootor...fx/01-fx.tween |
Получается мне нужно обозначить функцию изменения прозрачности блока от 1 до 0 возле функции на закрытие блока, и во флешке перед кодом закрытия блока вставить данный код? Подскажите, где данную функцию можно найти? В javascript чайник..
Вот нашел какой-то скрипт function setOpacity(value) { testObj.style.opacity = value/10; testObj.style.filter = 'alpha(opacity=' + value*10 + ')'; } Как его применить в моем случае? |
Часовой пояс GMT +3, время: 23:41. |