Не получается сделать, чтобы второй не появлялся пока первый не исчезнет. Что не так делаю? Код (Text): <script type='text/javascript'> $(document).ready(function() { $("A#trigger").toggle(function() { $("DIV#pict").fadeOut(1); setTimeout($(this), 1500); $("DIV#pict2").fadeIn(1500); return false; }, function() { $("DIV#pict2").fadeOut(1); setTimeout($(this), 1500); $("DIV#pict").fadeIn(1500); return false; }); }); </script>
setTimeout - это не sleep из php. Он работает совсем по-другому. Он запускает отсчёт времени, через которое будет вызвана функция, указанная первым параметром. Но при этом код, который расположен далее по тексту после setTimeout - выполнится сразу же.
Ну, вот такой код с таймаутом нарисовался: Код (Text): <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Timeout test</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var first = true; var animation = false; $(document).ready(function() { $('#click_me').click(function() { if(!animation) { animation = true; $('#' + (first ? 'first' : 'second')).fadeOut(1000); setTimeout(function(f) { return function() { $('#' + (f ? 'second' : 'first')).fadeIn(1000, function() { animation = false; }); } }(first), 1000); first = !first; } }); }); </script> </head> <body> <button id="click_me">Click me!</button> <div id="first">Первый</div> <div id="second" style="display: none;">Второй</div> </body> </html> Но вообще, у jQuery функций fadeIn и fadeOut есть ещё и второй аргумент - "callback". Это функция, которая будет вызвана при завершении анимации. Код (Text): <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Timeout test</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var first = true; var animation = false; $(document).ready(function() { $('#click_me').click(function() { if(!animation) { animation = true; $('#' + (first ? 'first' : 'second')).fadeOut(1000, function() { $('#' + (first ? 'second' : 'first')).fadeIn(1000, function() { first = !first; animation = false; }) }); } }); }); </script> </head> <body> <button id="click_me">Click me!</button> <div id="first">Первый</div> <div id="second" style="display: none;">Второй</div> </body> </html>