2

我需要有关自动滑块动画的帮助。所以，我的问题是 - 如何在悬停事件上停止动画，但不是立即停止，而是在单独元素上的动画完全完成时停止。

我有这段代码：

$(function(){

   var current_slide=1;
   var set_time=2500;

   $('span').css({top:'300px'});

   $.timer(6000,function(timer){
      switch(current_slide){
         case 1:
            $('span').css({top:'350px'});
            $('#slideshow').stop().animate({left:'-960px',top:'0px'},{easing:'easeOutBack',duration:set_time});
            current_slide=2;
            $('span').delay(2500).animate({top:'300px'});
            break;
         case 2:
            $('span').css({top:'350px'});
            $('#slideshow').stop().animate({left:'-1920px',top:'0px'},{easing:'easeOutBack',duration:set_time});
            current_slide=3;
            $('span').delay(2500).animate({top:'300px'});
            break;
         case 3:
            $('span').css({top:'350px'});
            $('#slideshow').stop().animate({left:'-2880px',top:'0px'},{easing:'easeOutBack',duration:set_time});
            current_slide=4;
             $('span').delay(2500).animate({top:'300px'});
            break;

         case 4:
            $('span').css({top:'350px'});
            $('#slideshow').stop().animate({left:'0px',top:'0px'},{easing:'easeOutExpo',duration:set_time});
            current_slide=1;
            $('span').delay(2500).animate({top:'300px'});
            break;
      }

      timer.reset(12000);
   });

   $("#slideshow").hover(function(){
      $(this).stop(true,true);
   });
});

问题是当我将鼠标悬停在滑块上时，动画几乎停止（跳到最后），突然而难看。可能我应该在.stop（）之前使用队列，或者类似的东西。这是一个很好的例子：http ://www.sevtopolishotel.com/ Tnx 提前！

4

3 回答 3

1

您可以像这样跟踪悬停状态：

var isHovered = false;
$("#slideshow").hover(function(e){
    isHovered = e.type == 'mouseenter';
});

从那里，可以将整个开关包装在 中if(!isHovered) { ... }，这意味着只要幻灯片悬停，计时器就会立即跳到设置下一个超时。

于 2012-04-18T14:18:34.193 回答
0

这是 .stop() 文档：http ://api.jquery.com/stop/

那里写着你可以为“jumpToEnd”传递一个参数。如果该参数为假，则动画将持续到结束。我认为您的代码应如下所示：

$("#slideshow").hover(function(){
          $(this).stop(true,false);
    });  });
于 2012-04-18T14:03:50.900 回答
0

您可以持有对计时器的引用。然后，您只需清除正在安排动画的计时器，而不是停止动画。因此当前动画将继续播放，但不会安排再次运行。如果你使用 javascript setTimeout 你可以这样做

vat timer=setTimeout(animation_function, delay);
 //to stop later
clearTimeOut(timer);

但我认为您正在使用 jquery 计时器插件 您的 $.timer 插件仍然应该有一个明确的方法来停止运行再次检查文档。

看这个帖子几乎是同样的问题。

于 2012-04-18T14:07:26.147 回答