Mouseover & hoverIntent - PullRequest
Новая
       21

Mouseover & hoverIntent

0 голосов
/ 26 сентября 2011

Я использую указатель мыши, чтобы изменить номер слайда в плагине jQuery Supersized в зависимости от того, какую кнопку вы нажимаете.

Однако, если анимация перехода к следующему слайду не была завершена, прежде чем переходить через другую кнопку, это не меняет слайд.

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

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

Мой код (пока указатель мыши применяется только к последней кнопке): 

$(".mybutton1").mouseover(function() {
api.goTo(2);
});

$(".mybutton2").mouseover(function() {
api.goTo(3);
});

$(".mybutton3").mouseover(function() {
api.goTo(4);

}).mouseout(function(){
api.goTo(1);
});

Заранее спасибо!

.

===================== ОБНОВЛЕНИЕ =====================

Большое спасибо за ваше последнее обновление.К сожалению, я не смог заставить ваш код работать.Тем не менее, я думаю, что, возможно, я нашел более простое решение, модифицирующее ваш исходный код и использующее jQuery hoverIntent…

Я обнаружил, что мог бы отключить функцию Supersized для остановки смены слайдов во время анимации, и я могу использовать hoverIntent, чтобы убедиться, что онждет достаточного времени, прежде чем менять слайд, чтобы анимация не складывалась.

Следующий код прекрасно работает при смене слайдов при наведении мыши.

Но я не могу заставить работать мышью, потому что она создаетновый экземпляр этого для каждой кнопки, и он складывает анимацию, когда мышь выкатывается из одной кнопки на следующую.Кроме того, кажется, что задержка таймера для мышки только задерживается, а не опция интервала, как при наведении мыши.

Так что мне просто нужно немного изменить это так, чтобы:

Если мышьне более ЛЮБОЙ из кнопок в течение 1000 мс, затем api.goTo (1);

Единственный способ, которым я могу придумать, - это создать невидимую ссылку на весь размер окна браузера изапустить вторую функцию hoverIntent, чтобы изменить слайд, когда он переворачивается, но я не думаю, что это будет лучшим способом!

Спасибо 

var buttonNumber = <?php echo $project_count; ?>; //Change this number to the number of buttons.
var prefix = "#project-link";
var prefix2 = "#project-bullet";

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

   (function(i){ //Anonymous function wrapper is needed to scope variable `i`
      var id = prefix+i;

      $(id).hoverIntent({
         interval: 350,
         over: mouseyover, 
         timeout: 1000,
          out: mouseyout
      });

      function mouseyover(){
         api.goTo(i+2);
         $(".project-bullet").fadeOut(1);
         $(prefix2+i).fadeIn(1000);
      }

      function mouseyout(){
         //api.goTo(1);
      }
   })(i);
}

1 Ответ

0 голосов
/ 27 сентября 2011

Обновленный ответ (9 октября 2011 г.):
Изменения:

  1. Строка 4: var goToApiOne = false; //New: the "memory" of Api 1
  2. Func mouseyover, первая строка: goToApiOne = false; //Cancel any move to Api 1
  3. Func mouseyout: см. Ниже, вся функция была заменена

Концепция этого кода:

  1. Наведите курсор мыши на что угодно (goToApiOne = false)
  2. Mouseout что-нибудь goToApiOne = true + setTimeout с задержкой 1000 мс
  3. Если завис над другим слайдом до того, как пройдено 1000 мс, ТО перейдите к шагу 1
  4. Вызов функции setTimeout: если goToApiOne == true ТО gotoApi(1); и
    goToApiOne = false (сброс).
<ч /> 
var buttonNumber = <?php echo $project_count; ?>; //Change this number to the number of buttons.
var prefix = "#project-link";
var prefix2 = "#project-bullet";
var goToApiOne = false; //New: the "memory" of Api 1

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

   (function(i){ //Anonymous function wrapper is needed to scope variable `i`
      var id = prefix+i;

      $(id).hoverIntent({
         interval: 350,
         over: mouseyover, 
         timeout: 1000,
          out: mouseyout
      });

      function mouseyover(){
         goToApiOne = false; //Cancel any move to Api 1
         api.goTo(i+2);
         $(".project-bullet").fadeOut(1);
         $(prefix2+i).fadeIn(1000);
      }

      function mouseyout(){
         goToApiOne = true; //Activate delay
         setTimeout(function(){
             if(goToApiOne){
                 goToApiOne = false; //Disable GoTo Api 1
                 api.goTo(1);
             }
         }, 1000);//Timeout of 1000ms
      }
   })(i);
}

<ч /> Старый ответ (28 сентября 2011 г.):

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

Прочитайте комментарии в коде ниже и настройте код в соответствии с вашими пожеланиями. Важно иметь переменную fadeFinished в области действия вашей функции исчезновения и обработчик события кнопки. 

var buttonNumber = 3; //Change this number to the number of buttons.

var poller = {interval:0, delay:0}; //timeout reference
var prefix = "#projectlink";
function pollerFunc(i, delay){
    //i = buttonNumber.
    //delay = number of intervals before activating a requested slide
    if(delay !== true){
        //Clean-up
        poller.clearInterval(poller.interval);
        poller.delay = delay || 0;

        //Set new interval. 50 milliseconds between each call
        poller.setInterval(function(){pollerFunc(i, true)}, 50);
    }
    else if(!vars.in_animation){
        //Check whether a delay has been requested. If yes, decrease the delay
        //  counter. If the counter is still higher than zero, return.
        if(poller.delay > 0 && --poller.delay > 0) return;

        window.clearInterval(poller.interval);
        var gotoNum = (i+2) % buttonNumber;
        // % = Modulo = Go back to x when the number = buttonNumber + x
        api.goTo(gotoNum);
    }
}
for(var i=0; i<buttonNumber; i++){
    (function(i){ //Anonymous function wrapper is needed to scope variable `i`
        var id = prefix+i;
        $(id).mouseover(function(){
            pollerFunc(i, 0); //No delay, if possible.
        })
        .mouseout(function(){
            pollerFunc(i, 10); //Delay 10 intervals (50x10 = 500 milliseconds
                               // before fading back to slide 1
        })
    })(i);
}

Еще одно примечание: я рекомендую изменить .projectlink на #projectLink, потому что элемент должен встречаться только один раз.

Ожидаемое поведение :

  1. при наведении курсора #projectlink2: переход к слайд 4 (первый раз, без задержки)
  2. mouseout : Установить запрос слайда 1 с задержкой 500 мс.
  3. наведение мыши #projectlink1 (в течение 500 мс) Отмена «запроса слайда 1». Посвященные слайд 3
  4. mouseout (до завершения анимации) Установить слайд 1 запрос с задержкой 500 мс
  5. mouseover #projectlink3: Предыдущая (см. 3) анимация еще не завершена. «Слайд 5» запрашивается без задержки
  6. Анимация слайдов (3) завершена Сразу начинается Слайд 5 .
  7. mouseout Установить слайд 1 запрос с задержкой 500 мс
  8. 500 мс прошло : Инициирует слайд 1
  9. и так далее.

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

...