懸停暫停簡單的jQuery旋轉木馬

Question

我已經成立了一個例子一個超級簡單的功能轉盤這裏：

http://codepen.io/anon/full/myvAz

的問題是，我不能讓傳送帶停止在懸停旋轉。

即使它有一個設置的寬度和高度，我甚至不能在包含div的盤旋時觸發警報。 但是，如果我將懸停部分粘貼到控制檯中，我可以獲得警報。

它與其他代碼結合時似乎不會觸發。

任何幫助將感激地讚賞

感謝

繼承人的代碼：

<script> 
// Main image carousel 
$(document).ready(function(){ 
$("#headerMrS > div:gt(0)").hide(); 

var carouDiv = function(){ 
    setInterval(function() { 
     $('#headerMrS > div:first') 
     .fadeOut(500) 
     .next() 
     .fadeIn(500) 
     .end() 
     .appendTo('#headerMrS'); 
    }, 2000); 
}; 

$(carouDiv());//Initialise the carousel function 

$("#headerMrS").hover(function(){//Stop the carousel on hover 
$(this).stop; 
    },function(){ 
    $(this).resume; 
}); 


//Direction Arrow links 
$(".button-sales").click(function(){ 
    $(".header").fadeOut(800); 
    $(".sales").animate({opacity:"show"},800); 
}); 
$(".button-modern").click(function(){ 
    $(".header").fadeOut(800); 
    $(".modern").animate({opacity:"show"},800); 
}); 
$(".button-antique").click(function(){ 
    $(".header").fadeOut(800); 
    $(".antique").animate({opacity:"show"},800); 
}); 
}); 

<style> 

#headerMrS {position:relative; height:150px; width:350px} 
.header {position:absolute; top:0; left:0} 
</style> 

<div id="headerMrS"> 
<div class="header sales active"> 
    <div class="header-content"> 
     <img src="http://placehold.it/350x150/4787ed/ffffff" alt="" /> 
     <div class="button-next button-antique">next</div> 
     <div class="button-prev button-modern">prev</div> 
    </div> 
</div> 
<div class="header antique"> 
    <div class="header-content"> 
     <img src="http://placehold.it/350x150/fc8a41/ffffff" alt="" /> 

     <div class="button-next button-modern">next</div> 
     <div class="button-prev button-sales">prev</div> 
    </div> 
</div> 
<div class="header modern"> 
    <div class="header-content"> 
     <img src="http://placehold.it/350x150/e7376b/ffffff" alt="" /> 

     <div class="button-next button-sales">next</div> 
     <div class="button-prev button-antique">prev</div> 
    </div> 
</div> 

Answer 1

怎麼樣使用clearInterval()？

而不是簡單地調用setInterval()，將setInterval()函數分配給一個變量，下面我使用carouselInt。這對於撥打clearInterval()是必要的。 要停止時間間隔，您可以致電clearInterval(carouselInt)

從我剛剛閱讀的文件中，stop()將停止當前動畫，但每2秒鐘會有一個新動畫。它對引發動畫觸發的setInterval沒有明顯的影響。

您可以嘗試以下操作。

var carouselInt = ''; 

var carouDiv = function(){ 
    carouselInt = setInterval(function() { 
     $('#headerMrS > div:first') 
     .fadeOut(500) 
     .next() 
     .fadeIn(500) 
     .end() 
     .appendTo('#headerMrS'); 
    }, 2000); 
}; 

$(carouDiv());//Initialise the carousel function 

$("#headerMrS").hover(function(){//Stop the carousel on hover 
clearInterval(carouselInt); 
    },function(){ 
    carouDiv(); 
}); 

Answer 2

好像你身邊的63線未閉合的腳本標記你HTML - 這可能是問題嗎？

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.