有沒有更好的方式來顯示暫停懸停在這個簡單的幻燈片？

Question

有沒有更好的辦法來添加懸停到這個簡單的幻燈片。我希望div能像這樣淡入淡出，以顯示暫停，這是我能想出的唯一方法。我仍然在學習jQuery。

這是24小時DEMO：http://trialsites.ihoststudio.com/trialsite366742/website/

注不會影響這一點，但它是在一個所見即所得的程序這樣做的HTML是有限

CSS：

#pause { 
display: none; 
width: 70px; 
background: white; 
padding: 2px; 
border-radius: 6px; 
border:1px solid black; 
font:15px/1.1em arial; 
color: black; 
text-align:center; 
} 

jQuery：

$(function() { 
var intervalId; 
$("#A > div:gt(0)").hide(); 
startInterval(); 
$('#A > div').mouseover(function() { stopInterval(); }); 
$('#A > div').mouseout(function() { startInterval(); }); 
$('#A > div').hover(
function() { $('#pause').fadeIn(); }, 
function() { $('#pause').fadeOut(); } 
); 

function stopInterval() { 
clearInterval(intervalId); 
} 

function startInterval() { 
intervalId = setInterval(function() { 
$("#A > div:first") 
.fadeOut(1000) 
.next() 
.fadeIn(1000) 
.end() 
.appendTo('#A'); 
}, 3000); 
} 

}); 

Answer 1

不要忘記將.stop（）添加到您的動畫中。

$('#pause').stop().fadeIn(); 

閱讀本以供參考： http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

您也可能要考慮更改此：

$('#A > div').mouseover(function() { stopInterval(); }); 
$('#A > div').mouseout(function() { startInterval(); }); 
$('#A > div').hover(
function() { $('#pause').fadeIn(); }, 
function() { $('#pause').fadeOut(); } 
); 

要這樣：

$('#A > div').hover(
     function() { stopInterval(); $('#pause').fadeIn(); }, 
     function() { startInterval(); $('#pause').fadeOut(); } 
    );