Question

我正在尝试使用setInterval（）在悬停上创建一个连续循环，但调用适当动画的函数只被调用一次。

当你悬停产品时，我正试图达到here所见的效果。

这是我到目前为止在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。

提前致谢。

Answer 1

对于setInterval，如果要将参数传递给匿名函数，则需要将函数包装在其中。 More info。

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

以下是基于您的updated fiddle。我做了一些额外的改进。

您可能希望在鼠标离开区域时重置所有数据：

//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);

而且，“幻灯片显示块”的重复ID为invalid，对于每个ID都应该是唯一的，或者像我一样使用class。这与您的问题没有直接关系，但很高兴知道，因为它可能导致other problems。

Answer 2

您可以构建自己的简化插件，例如 this one ：

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

});

jQuery mouseover连续幻灯片循环

2 个答案: