задержка вызова функции, когда над изображением в JQuery - PullRequest
Новая
       49

задержка вызова функции, когда над изображением в JQuery

1 голос
/ 23 февраля 2011

я должен начать с небольшого фона.у меня есть галерея изображений, которая, когда пользователь наводит курсор на изображение, фон веб-страницы скрывается, поэтому на странице отображается только изображение.как только пользователь выходит из изображения, фон снова отображается.я решил не использовать jQuery.hover (), потому что в верхней части изображения есть DIV.так что если пользователь наводит курсор на изображение, я могу скрыть фон веб-страницы, но как только он наведет курсор на DIV над изображением, он больше не будет зависать над изображением, и фон будет отображаться, даже если мышь все еще остается "над "изображение.так что это вызывает некоторые проблемы.поэтому я подумал о том, чтобы отслеживать положение мыши, чтобы определить, находится ли пользователь над изображением.

Я не являюсь экспертом по javascript или jQuery, поэтому, если есть какая-то удивительная функция, которая решит все мои потребности, пожалуйста, прости меня:-) Я все еще учусь, и это часть моего учебного процесса.

Я могу заставить все работать, но мне бы очень хотелось настроить его, чтобы вам пришлось перезаписывать изображение на 2,5 секунды.до удаления фона.таким образом, если кто-то просто путешествует по сайту, фон случайно не удаляется, а затем отображается снова.

хорошо, достаточно болтовни, код ... 

$(document).mousemove(function(e){
  photo   = $('#photo img.photo');
  offset  = photo.offset();
  width   = photo.width();
  height  = photo.height();

  _left   = offset.left + 5;
  _right  = _left + width;
  _top    = offset.top + 5;
  _bottom = _top + height;

  x = e.pageX;
  y = e.pageY;

  if (x > _left && x < _right && y > _top && y < _bottom) {
    hide_background();
  } else {
    show_background();
  }
});

такв идеале вам нужно навести курсор на изображение в течение 2,5 секунд, после чего будет вызвана функция hide_background ().если вы зависаете менее 2,5 секунд, ничего не происходит.как только мышь выходит из изображения, фон отображается без задержки.

, если кто-то может мне помочь, это будет очень цениться!спасибо!

Ответы [ 3 ]

1 голос
/ 23 февраля 2011

«Удивительная функция», о которой вы говорите, - это комбинация mouseout(), mouseenter() и mouseleave()

Посмотрите документацию: http://api.jquery.com/mouseout/

Если вы прокрутите вниз до демонстрации, вы увидите, что это именно та ситуация, которую вы описываете.

1 голос
/ 23 февраля 2011

Возможно, вы захотите использовать плагин hoverIntent .

0 голосов
/ 23 февраля 2011

Это можно сделать с помощью таймеров, когда мышь первоначально перемещается по области, она устанавливает таймер на выполнение через 2,5 секунды, а если мышь перемещается, она отменяет таймер: 

var photo   = $('#photo img.photo');
var offset  = photo.offset();
var width   = photo.width();
var height  = photo.height();
var photoTimer = null;
var isShowing = true;

$(document).mousemove(function(e){
  _left   = offset.left + 5;
  _right  = _left + width;
  _top    = offset.top + 5;
  _bottom = _top + height;

  x = e.pageX;
  y = e.pageY;

  if (x > _left && x < _right && y > _top && y < _bottom) {
    if(!photoTimer) {
        photoTimer = setTimeout(function(){
            isShowing = false;
            hide_background();
        }, 2500);
    }
  } else {
    if(photoTimer) {
        clearTimeout(photoTimer);
        photoTimer = null;
    }
    if(!isShowing) {
        show_background();
        isShowing = true;
    }
  }
});

Примечания:

  • Некоторые переменные можно кэшировать для ускорения кода, который выполняется при каждом движении мыши.
  • Я предполагаю, что фотография является фоновым изображением, в противном случае используйте.hover() функция на конкретном элементе, чтобы не улавливать каждое движение мыши по документу.
  • Я добавил флаг isShowing, чтобы указать, показывает фон или нет, поэтомучто show_background() не следует вызывать при каждом перемещении мыши за пределы области.Если у вас есть код где-то еще, который показывает / скрывает фоновое изображение, не забудьте установить isShowing соответственно.
...