Выдержка Mouseenter
Есть такая функция
$('#assessment').live("mouseenter", function() { $('.labels_hint').animate({ opacity: "toggle" }, 500); }); т.е когда наводим мышь на "assessment" появляется "labels_hint". Проблема в том что это происходит сразу как только наведешь мышь, а мне нужно так чтобы функция выполнялась только когда подержишь мышь на "assessment" 5 секунд. setTimeout() в этом случая как я понимаю не подходит. Подскажите пожалуйста, как это реализовать... |
Цитата:
<div id="el1">Текст<span id="el2" style="visibility: hidden; float: right;">Исчезающий текст</span></div> <script> div= document.getElementById("el1"); span= document.getElementById("el2"); interv= false; div.onmouseover= function(){ interv= setTimeout(function(){span.style.visibility=""; interv= false}, 1000); }; div.onmouseout= function(){ if (interv !== false) clearTimeout(interv) else { span.style.visibility="hidden"; } }; </script> |
Спасибо
|
можно .delay() использовать
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>test</title> <script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script> <script> $(function(){ var lh = $('.labels_hint'); $('#assessment').hover(function () { lh.stop(true).delay(5000).animate({opacity: 1}, 500); }, function () { lh.stop(true).animate({opacity: 0}, 500); }); }); </script> </head> <body> <div id="assessment">здесь держим мышь 5 секунд</div> <div class="labels_hint" style="opacity:0">labels hint</div> </body> </html> |
Вообще то немного не то, функция все равно выполняется если я наведу мышь и быстро уберу с объекта, а мне нужно только когда некоторое время держишь мышь непосредственно на нем.
|
Вот так, сообщение не появится если вы уберёте мышь из области.
При наведении запускается таймер, а если мышь убрать он сбрасывается. setTimeout - для вашего случая идеальный вариант, просто использовать его надо в паре с clearTimeout. <!DOCTYPE html> <html> <head> <style type="text/css"> #box { width: 100px; height: 100px; background-color: orange; } </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'></script> </head> <body> <div id="box"> Наведите на меня, и подождите 5 секунд. </div> <script type="text/javascript"> var tout; $(document).ready(function(){ // обработка при наведении // $('#box').mouseenter(function(){ //mouseenter тоже работает $('#box').mouseover(function(){ //создаём таймер который ждёт 5 секунд и запускает ваш метод tout=setTimeout(function(){ // здесь расположена вся ваша логика // которая запускается в случае если пользователь держит указатель 5 секунд. alert("Вы продержали 5 секунд"); },5000); }) // обработка в случае если мышь выводится из области .mouseout(function(e){ //унечтожаем таймер, дабы он не выполнил действие по истечению 5 секунд clearTimeout(tout) }) }); </script> </body> </html> |
DjDiablo, а, собственно, зачем вы это второй раз написали?)
|
Да ё-моё.
Я последний ответ посмотрел, а предыдущие нет. А ты вообще в каждой бочке затычка :) Только зайду на форум, а трикадин уже везде отметился. У меня уже дефицит общения начинается :D У меня даже есть теория на этот счёт. Когда на форуме появляется новый вопрос, у тебя в комнате завывает сирена, ты бросаешь всё на свете и бежишь отвечать. :D А когда приползаю я, весь урожай общественного признания уже собран. |
Цитата:
Цитата:
|
Часовой пояс GMT +3, время: 09:22. |