当鼠标输入一个按钮时，jQuery Banner取消功能

我有一张带有3张图像的横幅，我希望使用jQuery淡入淡出。 我有这部分工作正常与以下代码：

$j(document).ready(function() {
        initBanner();
  startLoop = setInterval(initBanner,50000);

  function initBanner(){
   $j("##image1").delay(10000).fadeOut(1500, function(){
    $j("##image2").fadeIn(1000, function(){
     $j("##image2").delay(10000).fadeOut(1500, function(){
      $j("##image3").fadeIn(1000, function(){
       $j("##image3").delay(10000).fadeOut(1500, function(){
        $j("##image1").fadeIn(1000);
        //inMotion = false;
       });  
      }); 
     }); 
    });
   }); 
  }

然而，在横幅下方有3个链接，它们具有与它们相关的图像。 当我将鼠标放在按钮上时，我想将淡入淡出的图像更改为与按钮相关的图像。

我努力了

clearInterval(startLoop)

但是这会在清除之前等待动画完成。 我想要的是能够立即停止动画并淡入相关图像。

有任何想法吗？

---

你的方法看起来有点奇怪，无论如何立即停止你需要调用动画元素的.stop()方法的所有当前动画。 你应该传入两个参数，都设置为true ，表示（clearQueue && jumpToEnd）;

function stopBanner() {
     clearInterval(startLoop);
     $('##image1, ##image2, ##image3').stop(true, true);
}

同样，你应该重新考虑你的代码。 例如，缓存DOM引用是一件非常重要的事情。

参考：.stop（）

链接地址: http://www.djcxy.com/p/64757.html

上一篇: jQuery Banner cancel function when mouseenter over a button

下一篇: JQuery fadeIn fadeOut with setInterval working sporadically