恢復功能了

Question

我正在使用JavaScript/jQuery的一個頁面上和我差不多完成了。我應該有旋轉的內容（功能「rotatecontent」）和它的div在旋轉的內容的地方顯示出來時，相關按鈕懸停。 我已經完成了這一切，除了當我從一個按鈕懸停了，所有的div內容消失，原來rotatecontent功能無法恢復。我需要實現一個函數，讓用戶從按鈕懸停後恢復。這裏是我的JS：

<script type="text/javascript"> 

var messages; 
var curcontentindex = 0; 
var prevcontentindex; 
var futcontentindex; 
var i; 



function rotatecontent() { 
messages.hide(); 
curcontentindex = (curcontentindex < messages.length - 1) ? curcontentindex + 1 : 0; 
messages.get(curcontentindex).style.display = "block"; 
} 


$(function() { 
messages = $('.dyncontent').find('div'); 
i = setInterval(rotatecontent, 1000); 


$('li').hover(
function() { 
$(this).addClass("hover"); 
clearInterval(i); // when mouse is over object 
}, 
function() { 
$(this).removeClass("hover"); 
setInterval(rotatecontent, 1000); //when mouse is no longer over object 
} 
); 

}); 




</script> 

這裏是我的HTML：

<div class="dyncontent"> 
<div id="div1">Be A Billiken </div> 
<div id="div2" style="display:none">Be A Billiken 2</div> 
<div id="div3" style="display:none">Be A Billiken 3</div> 
<div id="div4" style="display:none">Be A Billiken 4</div> 
<div id="div5" style="display:none">Be A Billiken 5</div> 
</div> 



<ul id="container" overflow:hidden> 

<li><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div1').show());" onMouseOut=""><img  src="../Work/Images/BAB.com_web_link_10.jpg" width="250" height="100" class="Bab-image"></a></li> 


<li><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div2').show());" onMouseOut=""><img  src="../Work/Images/SLU_on_the_Road.jpg" class="sluotr-image"> </a></li> 

<li><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div3').show());"  onMouseOut=""><img src="http://slu.edu/Images/graduate/Billiken_Blogs.jpg" class="blogs- image"></a></li> 

<li ><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div4').show());"  onMouseOut=""><img src="http://slu.edu/Images/graduate/SLU_Chat.jpg" class="chat-image"> </a></li> 

<li><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div5').show());"  onMouseOut=""><img src="http://slu.edu/Images/graduate/Viewbook_Button_2011.jpg"  class="view-image"></a> 
</li> 

</ul> 

Answer 1

jQuery的.hover()功能具有特殊的結構，它允許您設置會發生什麼，一旦鼠標移動到目標，什麼發生在鼠標不再指向對象之後。

$(".class").hover(
    function() { 
    $(this).addClass("hover"); // when mouse is over object 
    }, 
    function() { 
    $(this).removeClass("hover"); //when mouse is no longer over object 
    } 
); 

保存原來的設置，然後用它們在「鼠標未超過」部分