暫停它的動畫時

Question

這是我在這裏的第一篇文章，但我已經用這個網站作爲一個很好的參考多年。我只是試圖讓我的幻燈片暫停，當我把它懸停。代碼如下。我試圖使用jquery懸停來阻止它，但我沒有任何成功。有人有主意嗎？

$(function() { 
    // create the image rotator 
    setInterval("rotateImages()", 7000); 
}); 

function rotateImages() { 
    var oCurPhoto = $('#photoShow div.current'); 
    var oNxtPhoto = oCurPhoto.next(); 
    if (oNxtPhoto.length == 0) 
     oNxtPhoto = $('#photoShow div:first'); 

    oCurPhoto.removeClass('current').addClass('previous'); 
    oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000, 
     function() { 
      oCurPhoto.removeClass('previous'); 
     }); 
} 

Answer 1

在你實施的方式中，我只能推薦一個var來存儲旋轉的狀態。

這樣的：

var canRotate = true; 

$(function() { 
    // create the image rotator 
    setInterval("rotateImages()", 7000); 
}); 

function rotateImages() { 
    if(!canRotate) { return; } 
    var oCurPhoto = $('#photoShow div.current'); 
    var oNxtPhoto = oCurPhoto.next(); 
    if (oNxtPhoto.length == 0) 
     oNxtPhoto = $('#photoShow div:first'); 

    oCurPhoto.removeClass('current').addClass('previous'); 
    oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000, 
     function() { 
      oCurPhoto.removeClass('previous'); 
     }); 
} 

這應該很好地工作。

P.S .:您也可以在jQuery庫中查找方法.stop()。這會發送一個停止請求給正在動畫的對象。

Answer 2

這也許醜陋但這應該工作

$(function() { 
    var myTimer = 0; 
    myTimer = setInterval("rotateImages()", 7000); 

    $('#photoShow').mouseover(function() { 
      clearInterval(myTimer); 
     }).mouseout(function(){ 
      myTimer = setInterval("rotateImages()", 7000); 
     }); 
});