JavaScript / JQuery проблема с перемычками - PullRequest
Новая
       15

JavaScript / JQuery проблема с перемычками

2 голосов
/ 05 августа 2010

Я хочу, чтобы, когда мышь находилась над изображением, событие вызывалось ОДИН РАЗ, и оно должно запускаться снова только после того, как мышь выйдет из этого изображения и вернется обратно, а также по крайней мере через 2 секунды. Моя текущая функция вызывается постоянно (refreshcash), если я оставляю мышь над своим изображением 

<img src="images/reficon.png" onmouseover="refreshcash()" onmouseout="normalimg()" id="cashrefresh"/>

function refreshcash() {
 $("#showname").load('./includes/do_name.inc.php');
 $("#cashrefresh").attr("src","images/reficonani.gif");
}

function normalimg() {
 $("#cashrefresh").attr("src","images/reficon.png");
}

обновление кода В этом коде, похоже, есть ошибка, но алгоритм довольно логичный 

<script type="text/javascript">
var canhover = 1;
var timeok = 1;
function redotimeok() {
    timeok = 1;
}
//
function onmenter()
{
if (canhover == 1 && timeok == 1) 
    {
  enter();
  canhover = 0;
    }
}
//
function onmleave()
{
  leave();
  canhover = 1;
  setTimeout(redotimeok(), 2000);
  leave();
}
//
$('#cashrefresh').hover(onmenter(),onmleave());

function enter(){
  $("#showname").load('./includes/do_name.inc.php');
  $("#cashrefresh").attr("src","images/reficonani.gif");
}

function leave(){
  $("#cashrefresh").attr("src","images/reficon.png");
}
</script>

Ответы [ 2 ]

2 голосов
/ 05 августа 2010

Попробуйте hover: 

$('#cashrefresh').hover(function(){
  $("#showname").load('./includes/do_name.inc.php');
  $("#cashrefresh").attr("src","images/reficonani.gif");
}, function(){
  $("#cashrefresh").attr("src","images/reficon.png");
});

И ваше изображение должно выглядеть так: 

<img src="images/reficon.png" id="cashrefresh"/>

Обновление:

Измените ваш код следующим образом: 

var e = null;
var l = null;

$('#cashrefresh').hover(function(){
  e = setTimeout(enter, 2000)
}, function(){
  l = setTimeout(leave, 2000)
});

function enter(){
  $("#showname").load('./includes/do_name.inc.php');
  $("#cashrefresh").attr("src","images/reficonani.gif");
  clearTimeout(e);
}

function leave(){
  $("#cashrefresh").attr("src","images/reficon.png");
  clearTimeout(l);
}
1 голос
/ 06 августа 2010

Есть ли у вас изображения в кеше?Если вы замените их атрибутом src, не указав width / height в другом месте (лучше всего CSS), или не сделав их легкодоступными, то скрытая рамка (элемент img) свернется в меньшую (или нет)до тех пор, пока изображение не будет загружено достаточно далеко, чтобы браузер узнал правильные размеры изображения, чтобы изменить его размер (что может повлиять на другие элементы, подгоняемые под изображение).Точный эффект зависит от браузера, но вы можете потерять состояние при наведении, вызывая вызов функции mouseout.

Я предполагаю, что оба изображения имеют одинаковый размер, поэтому, если вы этого еще не сделали, вы можете попробовать добавитьРазмеры вашего CSS для #cashrefresh и посмотрите, решит ли это проблему.

Для задержки я бы порекомендовал использовать плагин таймеров jQuery (или аналогичный), который облегчает обработкутаймеры по сравнению с делать это самостоятельно.Возможно, вы захотите дать своим таймерам имена и попытаться остановить старые, прежде чем добавлять следующий.

...