嗨jQuery的懸停（鼠標懸停）工程，但懸停（鼠標移除）功能不會加載

嗨，這是我的第一個合法的問題爲stackoverflow，原諒我，如果我搞砸了一些社會政策。我正在Jquery上工作，並且正在使用這些插件。嗨jQuery的懸停（鼠標懸停）工程，但懸停（鼠標移除）功能不會加載

<script src="js/jquery.min.js"></script> 
    <script type="text/javascript" src="js/jquery.color-2.1.0.min.js"></script>

使代碼工作的這一部分：

$(document).ready(function() { 
    var timeout; 
    $('.twitter').hover(

    function() { 
     timeout = setTimeout(

     function() { 
      $('body').animate({ 
       "background-color": "#dd4b39" 
      }, 400); 
     }, 

     function() { 
      $('body').animate({ 
       "background-color": "#000000" 
      }, 400); 
      clearTimeout(timeout); 
     }); 
    }); 
});

Here's a JSFiddle

的代碼將激活懸停效果，改變div來軟的紅色，但它不會改變當您將鼠標移出div時，div會變爲純黑色。這個網上的大多數例子都表明了一種非常相似的方法，所以我很好奇我在哪裏弄髒了這件事。

編輯13年8月27日18:28 EST

我想歷史是必要的，我原來的代碼是一個非常簡單的功能，但它有生命的功能隊列的建築物的問題在移動到下一個動畫之前。

Here's an example（移動你的鼠標在兩個div之間快速）

$(document).ready(function(){ 
    $('.twitter').hover(
     function() {$('body').animate({"background-color":"#00aced"}, 400);}, 
     function() {$('body').animate({"background-color":"#232323"}, 400);} 
    ); 
    $('.facebook').hover(
     function() {$('body').animate({"background-color":"#3b5998"}, 400);}, 
     function() {$('body').animate({"background-color":"#232323"}, 400);} 
    ); 
});

我以爲我已經正確地構建了超時功能，如果你開始一個新的懸停功能，將停止以前的懸停功能的動畫，防止建立動畫。

來源

2013-08-27 JosephMCasey

你的代碼是很奇怪的，什麼是你想用setTimeout的呢？爲什麼你的鼠標不工作？是因爲你沒有給鼠標懸停功能。 – putvande

當您提供小提琴時，請確保包含所需的庫，以下是jQuery和jQuery UI庫的更新小提琴http://jsfiddle.net/LBBja/2/也是我之前的評論，爲什麼您需要tiemout ？ –

感謝@koala_dev，我從來沒有要求過幫助，所以整個JSFiddle對我來說都是新手。注意未來。 – JosephMCasey

要停止建立動畫隊列，你需要做的就是調用stop()調用animate()前：

$('.twitter').hover(
    function() {$('body').stop().animate({"background-color":"#00aced"}, 400);}, 
    function() {$('body').stop().animate({"background-color":"#232323"}, 400);} 
);

Updated fiddle

來源

2013-08-27 22:59:37

:(我會花這麼長時間在一個愚蠢的問題;天啊，它總是這麼簡單。謝謝你回答@koala_dev。 – JosephMCasey

不太確定你想要在setTimeout那裏做什麼，但是處於錯誤的位置。 hover接受兩個功能，一個mouseover和一個mouseout。所以它應該是上線：$('body').delay(1000).animate(....

上hover欲瞭解更多信息：

$(document).ready(function() { 
    $('.twitter').hover(
     function() { 
      $('body').animate({ 
       "background-color": "#dd4b39" 
      }, 400); 
     }, 

     function() { 
      $('body').animate({ 
       "background-color": "#000000" 
      }, 400); 
     } 
    ); 
});

如果你想與setTimeout做的是創造一個延遲，您可以在animate功能前添加delay： http://api.jquery.com/hover/

來源

2013-08-27 22:04:49 putvande

感謝putvande建立我錯誤地格式化了原來的那個（我害怕那是問題），這是我的原始代碼;我希望能夠修復功能的構建。 – JosephMCasey

這是否解決了您的問題？如果是這樣，你可以好好接受它。 – putvande

它沒有解決我的問題。這個延遲使得堆積問題變得更糟。我很抱歉沒有儘早做到這一點。 – JosephMCasey

嗨jQuery的懸停（鼠標懸停）工程，但懸停（鼠標移除）功能不會加載

回答

相關問題