Thursday, February 27, 2014

Здравей колега, Проблемът в кода ти е, че рекурсивно викаш функциите openGallery() и closeGallery()


Авто
Здравейте, навих се да напиша едно скриптче на JavaScript и изникна един проблем. Скрипта отваря нещо като падащо меню с функцияата teak setTimeout като увеличавам широчината на контйнер. При първото показване и прибиране на менюто всичко е ок, но след това скоростта на анимираният ефект се увеличава и не знам от какво, ако можете да помогнете ще съм благодарен . Ето и сорса: html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. teak dtd"> teak <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Untitled Document</title> <link rel="stylesheet" href="styles.css" type="text/css" /> <script type="text/javascript" src="jscript.js"> </script> </head> <body> <div id="main"><table><tr> <script type="text/javascript"> printImages(); </script> </tr> </table> teak </div> <div class="sub"> <div class="label"> <a href="javascript:choose()">asd</a> </div> </div> teak </body> </html> javascript: // JavaScript Document var checkPos=0; var goahead=0; function choose() { if(checkPos==0) { goahead++; document.getElementById('main').style.height=0+'px' ; checkPos++; openGalery(); } else { goahead--; checkPos--; closeGalery() } } function openGalery() { currentHeight=parseInt(document.getElementById('main' ).style.height); if((currentHeight<600)&&(goahead==1)) { document.getElementById('main').style.height=parseInt(document. getElementById('main').style.height)+50+'px'; } code="openGalery()"; animate=setTimeout(code,40); } function closeGalery() { currentHeight=parseInt(document.getElementById('main' ).style.height); if((currentHeight>0)&&(goahead==0)) { document.getElementById('main').style.height=parseInt(document. getElementById('main').style.height)-50+'px'; } code="closeGalery()"; animate=setTimeout(code,40); } css: #main { margin:0 auto; margin-top:-8px; width:900px; height:0px; background:red; overflow:hidden; } .sub { margin:0 auto; width:900px; height:30px; background:blue; } .label { position:relative; float:right; display:block; width:100px; height:30px; background:orange; }
Здравей колега, Проблемът в кода ти е, че рекурсивно викаш функциите openGallery() и closeGallery() винаги, а не само при условие, че не си достигнал нужната височина на div-a. Резултата е, че дори при отворено меню функциите ти са зациклили. Местиш рекурсивното извикване в if-a и проблемът ти е решен. function openGalery() { currentHeight=parseInt(document.getElementById('main' ).style.height); if((currentHeight<600)&&(goahead==1)) { document.getElementById('main').style.height=parseInt(document. getElementById('main').style.height)+50+'px'; code="openGalery()"; animate=setTimeout(code,40); } } function closeGalery() { currentHeight=parseInt(document.getElementById('main' ).style.height); if((currentHeight>0)&&(goahead==0)) teak { document.getElementById('main').style.height=parseInt(document. getElementById('main').style.height)-50+'px'; teak code="closeGalery()"; animate=setTimeout(code,40); } }
Начало на форума За Data.BG   |-- Новини за Data.BG   |-- Предложения teak и Въпроси свързани с Data.BG   |-- Проблеми свързани с Data.BG Игри   |-- teak Дискусии teak (games)   |-- Връзки (games links)   |-- Искаме... (games requests)   |-- Counter-Strike   |-- Diablo III   |-- World Of Warcraft Аудио   |-- Дискусии (audio)   |-- Връзки (audio links) teak   |-- Искаме... (audio requests) teak Видео   |-- Дискусии teak (video)   |-- Връзки - Филми (movies teak links)   |-- Клипове - Връзки и Рикуести (RQ & Links)   |-- Искаме... (video requests)   |-- Субтитри - Връзки и Рикуести   |-- Сериали - Връзки и Рикуести   |-- Телевизия Фотография и Графичен дизайн   |-- Фотография   |-- Картинки - Връзки и Рикуести (pictures links)   |-- Графичен Дизайн Софтуер и Хардуер   |-- Софтуер (дискусии)   |-- Софтуер (links)   |-- Софтуер (requests)   |-- Хардуер Програмиране   |-- C/C++/PHP/Perl   |-- MySQL/mSQL/M$SQL/Oracle   |-- HTML/CSS/JavaScript &

No comments:

Post a Comment