jQuery Mouseover непрерывный цикл слайд-шоу

Question

jQuery Mouseover непрерывный цикл слайд-шоу

0

Я пытаюсь создать непрерывный цикл при наведении с помощью setInterval(), но функция, вызывающая соответствующую анимацию, вызывается только один раз.

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

Вот то, что у меня есть до сих пор в jsfiddle.

var hoverInterval;

var i = 0;

function doStuff(slides) {
    var count = slides.length;

    slides.eq(i).animate({top:'100px'}, 100);

    if(++i>=count){
        i=0;
    }

    slides.eq(i).animate({top:'0px'}, 100);

    setTimeout(doStuff(), 500);    
}

$(function() {
    $("#slideshow-block").hover(
        function() {
            // call doStuff every 100 milliseconds
            hoverInterval = setInterval(doStuff($(this).children('.slide')), 500);
        },
        function() {
            // stop calling doStuff
            clearInterval(hoverInterval);
        }
    );
});

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

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

Eric T 13 март 2014, в 01:04

Источник

0

также прошу прощения за ужасно выглядящий код, я на 95% бэкэнд
Eric T 13 март 2014, в 00:00

Теги:

javascript

jquery

html

css

2 ответа

1

Вы можете создать свой собственный упрощенный плагин, как этот:

jQuery(function($) {

  $.fn.hoverAnimate = function( obj ){
    return this.each(function(){
      var slideTime = obj.slide||300,
          pauseTime = obj.pause||1000,
          el = $(this),
          height = el.outerHeight(true),
          sl = $(">*", el),
          n  = sl.length,
          i  = 0,
          itv;
      function loop(){
        itv = setInterval(function(){
          sl.eq(++i%n).appendTo(el).css({top:height}).animate({top:0},slideTime);
        },pauseTime+slideTime);
      }
      function stop(){
        clearInterval(itv); 
      }
      el.hover(loop, stop); 
    });
  };

  // Use like:
  $("#one").hoverAnimate({slide:600,pause:1000});
  $("#two").hoverAnimate({pause:500});
  $(".someSelectors").hoverAnimate(); // Will use default 300, 1000

});

Roko C. Buljan 13 март 2014, в 02:20

Ещё вопросы

также прошу прощения за ужасно выглядящий код, я на 95% бэкэнд

Janez · Accepted Answer · 2014-03-13T01-04-00.000Z

Для setInterval вам нужно обернуть свою функцию внутри анонимной функции, если вы хотите передать ей параметры. Больше информации.

hoverInterval = setInterval(function() {doStuff(parameters)}, 1000);

Вот обновленная скрипка, основанная на вашем. Я сделал несколько дополнительных улучшений.

Вероятно, вы захотите сбросить все данные, когда область листьев мыши:

//reset the counter    
i= 0; 
//reset all slides
$(this).children('.slide').animate({top:'100px'}, 0); 
//first one should be in visible area         
$(this).children('.slide').eq(0).animate({top:'0px'}, 0); 
// stop calling doStuff
clearInterval(hoverInterval);

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

Большое спасибо - принимая это как ответ. Ответ Роко тоже работает.