Javascript-форум - Алгоритм задержки для событий.

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

- jQuery (https://javascript.ru/forum/jquery/)

- - Алгоритм задержки для событий. (https://javascript.ru/forum/jquery/18992-algoritm-zaderzhki-dlya-sobytijj.html)

Алгоритм задержки для событий.

Для событий типа hover и тп.. необходимо сделать задержку перед выводом по принципу title у ссылок..
Тоесть при наведении и остановке курсора на N времени на объекте - делать экшн...

ну или вот на примере:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js?ver=3.1.3"></script>
</head>

<body>

<script type="text/javascript">
$(document).ready(function(){
    $('#chan').css({backgroundColor:"red"});
    $('#chan').mouseover(function(){
        $('#chan').delay(1000);
        $('#chan').animate({opacity:0.5, height:"400px"}, 250); 
         
    });
    $('#chan').mouseout(function(){
        $('#chan').animate({opacity:1, height:"700px"}, 250);  
    });
 
});
</script>
<div id="chan" style="width:700px; height:700px; margin:0 auto; border:5px black solid; cursor:pointer;"></div>

Если бысро навести и убрать курсор.. то экшн произойдет через указанный делай.. а надо чтобы было нечто вроде проверки, чтобы спустя данный делай курсор был в области, иначе экшн не проводить..

Как это реализовать?! Через какие функции приблизительно?!

Используйте тайм-аут к примеру. При наведение мыши через timeout вызываете функцию. При mouseout очищаете таймаут.

О.. спасиб.. поробую)..
Нее.. я думаю не поможет.. толку очищать таймаут?! в таком случае функция будет вызываться сразу.. хмм...

Еще раз повторюсь.. на всякий... проблема в том чтобы событие не выполнялось раньше времени и мышь не должна покидать объект в течении этого времени..
иначе - ничего не делать...

Тайна разгадана)) Лови своё решение)))

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js?ver=3.1.3"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#chan').css({backgroundColor:"red"});
$("#chan").hover( function () {
$(this).data('timeout', setTimeout( function () {
$('#chan').animate({opacity:0.5, height:"400px"}, 250);}, 1000));
}, function () {clearTimeout($(this).data('timeout'));});
$('#chan').mouseout(function(){
$('#chan').animate({opacity:1, height:"700px"}, 250);
});
});
</script>
<div id="chan" style="width:700px; height:700px; margin:0 auto; border:5px black solid; cursor:pointer;"></div>

Спасибо)! Оно самое)..