Javascript-форум - Функция задержки

Javascript-форум (https://javascript.ru/forum/)

- Internet Explorer (https://javascript.ru/forum/css-html-internet-explorer/)

- - Функция задержки (https://javascript.ru/forum/css-html-internet-explorer/11360-funkciya-zaderzhki.html)

Golovastik

19.08.2010 18:39

Функция задержки

Пробую для эксперимента написать чтоб при нажатии на кнопку происхдила задержка картинки, но при нажатии на кнопку ничего не происходит, не знаю почему, как исправить?

Код:

<html>

<head><title>Привет</title>

<script type='text/javascript'>

var a,b,timeout,zadershka;



function f(){

zadershka = setTimeout(

function() {

if(!b)

b = document.getElementById('maks');

b.style.display='block';},

2000);

};



</script>



</head>

<body>

Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>

Такого пса я не видел никогда в жизни в этом мире. Вот что<br>

значит настоящая 

псина.Такой псины я <br>

не видал за все свои 20 лет жизни. Это была одна из лучших <br>

псин,среди тех когда мне приходилось видеть собак. <br>



<input type='button' value='кнопка' id='maks' onClick='f3()'>

<div id="tak" style="display:none; position:absolute; 

left:300px; top:0px;"><img src='2.gif' ></div> <br><br>



</body>

</html>

Golovastik

19.08.2010 20:14

Исправил. Вот так тоже не работает.

Код:

<html>

<head><title>Привет</title>

<script type='text/javascript'>

var a,b,timeout,zadershka;



function f(){

zadershka = setTimeout(

function() {

if(!b)

b = document.getElementById('maks');

b.style.display='block';},

2000);

};



</script>



</head>

<body>

Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>

Такого пса я не видел никогда в жизни в этом мире. Вот что<br>

значит настоящая 

псина.Такой псины я <br>

не видал за все свои 20 лет жизни. Это была одна из лучших <br>

псин,среди тех когда мне приходилось видеть собак. <br>



<input type='button' value='кнопка' id='maks' onClick='f()'>

<div id="maks" style="display:none; position:absolute; 

left:300px; top:0px;"><img src='2.gif' ></div> <br><br>



</body>

</html>

Я хочу при нажатии на кнопку, чтоб картинка повисела 2 секунды и исчезла
Так не выходит.

inGray

19.08.2010 20:48

Т.е. при нажатии она должна появиться сначала, повисеть 2 секунды и исчезнуть?

Golovastik

19.08.2010 20:48

Да, всё верно.

PeaceCoder

19.08.2010 20:49

<html>
<head><title>Привет</title>
<script type='text/javascript'>
var a,b,timeout,zadershka;

function f(){
var b = document.getElementById('maksImg');
b.style.display = 'block';
setTimeout(
function() {
b.style.display='none';},
2000);
};

</script>

</head>
<body>
Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>
Такого пса я не видел никогда в жизни в этом мире. Вот что<br>
значит настоящая 
псина.Такой псины я <br>
не видал за все свои 20 лет жизни. Это была одна из лучших <br>
псин,среди тех когда мне приходилось видеть собак. <br>

<input type='button' value='кнопка' id='maks' onClick='f()'>
<div id="maksImg" style="display:none; position:absolute; 
left:300px; top:0px;"><img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' ></div> <br><br>

</body>
</html>

Golovastik

19.08.2010 20:52

Странно, но при нажатии на кнопку ничего не выводится.

inGray

19.08.2010 21:01

Golovastik,
Действительно странно, у меня код товарища PeaceCoder вполне работает. Причем именно так, как заказано.

Golovastik

19.08.2010 21:30

Да, эт онаверное был глюк браузера, сейчас работает.
Скажите ,а как сделать чтоб после нажатия на кнопку, картинка выехала вниз например на 200 пикселей вниз, постояла, 2 секунды и заехала обратно в верх в о пикселей, я хочу попробовать сделать, вы скажите, как примерно это сделать,я не знаю как, хочу чисто на Яваскрипте попробовать понять как это делается.

ksa	19.08.2010 21:37

Цитата:

Сообщение от Golovastik (Сообщение 67978)

вы скажите, как примерно это сделать

Как вариант...

function f(){
var b = document.getElementById('maksImg');
b.style.display = 'block';
b.style.top = '200px';
setTimeout(
function() {
b.style.display='none';
b.style.top = '0';
},
2000);
};

inGray

19.08.2010 21:54

ksa,
ИМХО, это не выехала, а прыгнула.

Golovastik

19.08.2010 23:01

Я хочу чтоб выезжала как картинка, это масив нужно создавать а оптом циклом проходится ил как? Я вообще думаю может нужно, как-то вот так b.style.top = '200px'; получать доступ в цикле и менять позицию может так надо?
Но как изменять пиксели за каждой итерацией?

Golovastik

19.08.2010 23:55

Какой-то бред немного выходит, не работает, выдаёт ошибку что в строке 26, символ 1 ожидается объект.

Код:

<html>

        <html>

        <head><title>Привет</title>

        <script type='text/javascript'>

      var a,pause;



function f(){

var a = document.getElementById('maksImg');

a.style.display = 'block';



for(var i=0; i<10; i++){

a.style.top = '0px'+'1px';



};

};

 

        </script>

         

        </head>

        <body>

        Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>

        Такого пса я не видел никогда в жизни в этом мире. Вот что<br>

        значит настоящая

        псина.Такой псины я <br>

        не видал за все свои 20 лет жизни. Это была одна из лучших <br>

        псин,среди тех когда мне приходилось видеть собак. <br>

         

        <input type='button' value='кнопка' onClick='f()'>



        <div id="maksImg" style="display:none; position:absolute;

        left:100px; top:0px;"><img src='2.gif' ></div> <br><br>

         

        </body>

        </html>

Golovastik

20.08.2010 01:04

Вот так вроде сработало.

<html>
	<head><title>Привет</title>
	<script type='text/javascript'>
      var a,pause;

var id, i, dir;

function g(){
var a = document.getElementById('maksImg');
a.style.top = (i<50)?i:'50'+'px';
if (dir==1) i++; else i--;
if (i >= 70) dir=-1;
if (i < -90) {
clearInterval(id);
a.style.display = 'none';
}}

function f(){
var a = document.getElementById('maksImg');
a.style.display = 'block';

i=-90;dir=1;
id = setInterval("g()",50);

}
 
	</script>
	 
	</head>
	<body>
	Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>
	Такого пса я не видел никогда в жизни в этом мире. Вот что<br>
	значит настоящая
	псина.Такой псины я <br>
	не видал за все свои 20 лет жизни. Это была одна из лучших <br>
	псин,среди тех когда мне приходилось видеть собак. <br>
	 
	<input type='button' value='кнопка' onClick='f()'>

	<div id="maksImg" style="display:none; position:absolute;
	left:100px; top:-90px;"><img src='2.gif' ></div> <br><br>
	 
	</body>
	</html>

рони	20.08.2010 03:55

осталось паузу добавить )))

var a, pause = 3000,
    id, i, dir;

function g() {
    var b = document.getElementById("maksImg");
    b.style.top = i < 50 ? i : "50px";
    if (dir == 1) i++;
    else i--;
    if (i >= 50) {
        dir = -1;
 *!*       
       clearInterval(id);
        window.setTimeout('id = setInterval("g()",50)', pause)
 */!* 
   }
    if (i < -90) {
        clearInterval(id);
        b.style.display = "none"
    }
}
function f() {
    if(id)clearInterval(id);
    document.getElementById("maksImg").style.display = "block";
    i = -90;
    dir = 1;
    id = setInterval("g()", 50)
};

ksa	20.08.2010 08:41

inGray, таки добавить цикл + задержку в нем... Начнёт "выезжать". :)

inGray

20.08.2010 11:01

ksa,
;) Именно.

Golovastik

20.08.2010 14:26

Скажите пожалуйста ,а как сделать такие кнопки на Яваксрипт синие, чтоб такое происходило при наведении мышкой как на этом сайте
http://213.248.58.131/

Sweet

20.08.2010 14:33

Цитата:

Сообщение от Golovastik

Скажите пожалуйста ,а как сделать такие кнопки на Яваксрипт

Прежде чем бежать задавать вопрс, мог бы в исходный код глянуть:

<a class="linkin2" id="menu2" onmousemove="style.cssText='background-image:url(val/anibtn.gif)';" onmouseout="style.cssText='background-image:url(val/btn.gif)';" style="background-image:url(val/anibtn.gif)">

Golovastik

20.08.2010 16:52

Так там когда навёл на синюю кнопку она несколько раз уменьшается, а не просто изменилось на другую картинку 1 раз и всё. Сколько там картинок использовалось?

Sweet

20.08.2010 17:29

Цитата:

Сообщение от Golovastik

Ты что, думаешь я какие-то предположения думаю?
Вот это:

<a class="linkin2" id="menu2" onmousemove="style.cssText='background-image:url(val/anibtn.gif)';" onmouseout="style.cssText='background-image:url(val/btn.gif)';" style="background-image:url(val/anibtn.gif)">

код, выдернутый с того сайта. Анимация там делается одной вот этой гифкой.

Golovastik

20.08.2010 17:58

Есть вопрос по поводу предыдущего кода:

<html>
	<head><title>Привет</title>
	<script type='text/javascript'>
var a, pause = 1500,
	    id, i, dir;
	 
	function g() {
	    var b = document.getElementById("maksImg");
	    b.style.top = i < 50 ? i : "50"+"px";
	    if (dir == 1) i++;
	    else i--;
	    if (i >= 50) {
	        dir = -1;
	       clearInterval(id);
	        window.setTimeout('id = setInterval("g()",5)', pause);
	   }
	    if (i < -90) {
        clearInterval(id);
	        b.style.display = "none"
	    }
	}
	 function f() {
	 //   if(id)clearInterval(id);
	    document.getElementById("maksImg").style.display = "block";
	    i = -90;
	    dir = 1;
	    id = setInterval("g()", 5);
}
 
	</script>
	 
	</head>
	<body>
	Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>
	Такого пса я не видел никогда в жизни в этом мире. Вот что<br>
	значит настоящая
	псина.Такой псины я <br>
	не видал за все свои 20 лет жизни. Это была одна из лучших <br>
	псин,среди тех когда мне приходилось видеть собак. <br>
	 
	<input type='button' value='кнопка' onClick='f()'>

	<div id="maksImg" style="display:none; position:absolute;
	left:100px; top:-90px;"><img src='2.gif' ></div> <br><br>
	 
	</body>
	</html>

Скажите, почему в браузере ИЕ, медленее, чем в других браузерах, как исправить выезд чтоб был бычтрее ,как и у других браузерах?

Golovastik

20.08.2010 18:08

Ещё вопрос почему если даже сетинтервал сделать в 0, вс равно долго выезжать будет, а не резко выехать постоять немножко и заехать резко назад? Как сделать чтоб движение во всех браузерах было одинаковое?

PeaceCoder

20.08.2010 18:44

Цитата:

Сообщение от Golovastik

Странно, но при нажатии на кнопку ничего не выводится.

Код бы в стадии тестирования видимо на тот момент

Цитата:

Сообщение от Golovastik

потому что ИЕ тормоз.

Цитата:

Сообщение от Golovastik

0 не говорит что задержек не будет. это говорит о том что функция выполнится как только браузер будет свободен (как можно быстрее).
На счет того как выравнять- можете даже не парится. каждый браузер работает со своей скоростью. самый тормоз - ИЕ, потом мозила, потом опера, хром, а за сафари незнаю, но он стоит по скорости почти в одном ряду с оперой и хромом.

Golovastik

20.08.2010 20:19

Как сделать чтоб быстрый заезд был, остановился на 2 секунды и заезд ушёл,пробую менять на 1 задержку не помогает, что делать?

рони	20.08.2010 21:00

Golovastik,
ограничить/установить общее время выезда а не i++; каждые 5 миллисекунд

Golovastik

20.08.2010 22:24

Как это примерно, немножко напишите.

рони	20.08.2010 23:35

Пример: Ой написал )))

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
  <title>Привет</title>
<script type='text/javascript'>
function slide(b, h, f, d, i, c) {
    var e = RegExp("(" + h + ".*?)([-+]?\\d+\\.?\\d*)", "i");
    b.timer && window.clearTimeout(b.timer);
    c = typeof c == "function" ? c : false;
    var a = b.style.cssText;
    e.test(a) || (a += "; top: " + d + "px;");
    var j = (new Date).getTime();
    setTimeout(function () {
        var g = ((new Date).getTime() - j) / i;
        a = a.replace(e, "$1" + Math.floor((f - d) * g + d));
        b.style.cssText = a;
        if (g < 1) b.timer = setTimeout(arguments.callee, 35);
        else {
            a = a.replace(e, "$1" + f);
            b.style.cssText = a;
            c && c()
        }
    }, 10)
};

function f_top(){
var b = document.getElementById("maksImg"), pause = 1500, time = 3000, old = -90, to = 50 , direction= "top";
slide(b,direction, to, old, time,function(){window.setTimeout(function(){slide(b,direction, old, to, time)}, pause)})
}

function f_left(){
var b = document.getElementById("maksImg2"), pause = 1500, time = 3000, old = -336, to = 50 , direction= "left";
slide(b,direction, to, old, time,function(){window.setTimeout(function(){slide(b,direction, old, to, time)}, pause)})
}




</script>
</head>

<body>
  Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>
  Такого пса я не видел никогда в жизни в этом мире. Вот что<br>
  значит настоящая псина.Такой псины я<br>
  не видал за все свои 20 лет жизни. Это была одна из лучших<br>
  псин,среди тех когда мне приходилось видеть собак.<br>

  <form>
    <input type='button' value='сверху' onclick='f_top()'>
    <input type='button' value='слева' onclick='f_left()'>
  </form>

  <div id="maksImg" style="display:block; position:absolute; left:100px; top:-90px;">
    <img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif'>
  </div>

  <div id="maksImg2" style="display:block; position:absolute; left:-336px; top:20px;">
    <img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif'>
  </div><br>
  <br>
</body>
</html>

Golovastik

20.08.2010 23:41

Во так вроде,резко выехало, остановилось на 1 сек и заехало, похоже на нормальное движение картинки?

<html>
<head><title>Привет</title>
<script type='text/javascript'>
var time_down = 500;
var time_stop = 1000;
var time_up = 500;
var max_top = 50;

var id, i, scale;

function move_down() {
i += scale;
document.getElementById("maksImg").style.top = i + "px";
if (i >= max_top) {
clearInterval(id);
setTimeout("move_pause();", time_stop);
}
}

function move_pause() {
scale = 1;
var interval = time_up / (max_top + 90);
while (interval < 15) { interval *= 2; scale *= 2; }
id = setInterval("move_up();", interval);
}

function move_up() {
i -= scale;
document.getElementById("maksImg").style.top = i + "px";
if (i <= -90) {
clearInterval(id);
document.getElementById("maksImg").style.display = "none";
}
}

function f() {
document.getElementById("maksImg").style.display = "block";
i = -90; scale = 1;
var interval = time_down / (max_top + 90);
while (interval < 15) { interval *= 2; scale *= 2; }
id = setInterval("move_down();", interval);
}

</script>

</head>
<body>
Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>
Такого пса я не видел никогда в жизни в этом мире. Вот что<br>
значит настоящая
псина.Такой псины я <br>
не видал за все свои 20 лет жизни. Это была одна из лучших <br>
псин,среди тех когда мне приходилось видеть собак. <br>

<input type='button' value='кнопка' onClick='f()'>

<div id="maksImg" style="display:none; position:absolute;
left:100px; top:-90px;"><img src='2.gif' ></div> <br><br>

</body>
</html>

Golovastik

20.08.2010 23:59

Заметил проблемку в моём коде ,что если 5 раз нажать на кнопку без передышки,получаются глюки какие-то, а потом на 66-ой раз вообще кнопка не будет работать.
Редактировать/удалить сообщение

Golovastik

21.08.2010 00:11

А на джейквери попробовал так, не работает,прост нажимается и ничего не происходит.

Цитата:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Проба</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="jquery.js"></script>

<script type='text/javascript'>
function f(){
$('#maskImg').hide(300);
}
</script>
</head>

<body>

Жил-был пёс. Он был самый лучший пёс за всю мою жизнь.<br>
Такого пса я не видел никогда в жизни в этом мире. Вот что<br>
значит настоящая
псина.Такой псины я <br>
не видал за все свои 20 лет жизни. Это была одна из лучших <br>
псин,среди тех когда мне приходилось видеть собак. <br>

<input type='button' value='кнопка' onClick='f()'>
<div id="maksImg" style="display:none; position:absolute;
left:100px; top:-90px;"><img src='2.gif' ></div> <br><br>

</body>
</html>

Часовой пояс GMT +3, время: 04:46.