2010-12-16 237 views
1
$(document).ready(function() { 
    $("#aboutme-block").hide(); 
    $("#stories-block").hide(); 

    $("div.aboutme").hover(function() { 
     $("#aboutme-block").fadeIn(1000); 
     $("#stories-block").hide(); 
    }); 

    $("div.stories").hover(function() { 
     $("#stories-block").fadeIn(1000); 
     $("#aboutme-block").hide(); 
    }); 
}); 

有人能告訴我這裏有什麼問題嗎?JQuery多個懸停效果不起作用

+3

你爲什麼覺得有什麼不對?你應該解釋你想要它做什麼以及它實際做了什麼。 – 2010-12-16 17:19:16

+2

你能發佈關聯的HTML嗎? – 2010-12-16 17:19:17

+0

請確保你所有的ids和類名都是正確的 – kobe 2010-12-16 17:23:36

回答

2

不知道是什麼問題,但我想阻止動畫的發生不必要的。

$(document).ready(function(){ 
    $("#aboutme-block,#stories-block").hide(); 

    $("div.aboutme").mouseenter(function() { 
    $("#aboutme-block:hidden").fadeIn(1000); 
    $("#stories-block").stop(true,true).hide(); 
    }); 

    $("div.stories").mouseenter(function(){ 
    $("#stories-block:hidden").fadeIn(1000); 
    $("#aboutme-block").stop(true,true).hide(); 
    }); 
}); 

這裏有一個縮短的版本,重複使用相同的處理程序:

$(document).ready(function() { 
    var blocks = $("#aboutme-block,#stories-block").hide(); 

    $("div.aboutme,div.stories").mouseenter(function() { 
     var isAboutme = $(this).hasClass('aboutme'); 
     blocks.eq(+(!isAboutme)).filter(":hidden").fadeIn(1000); 
     blocks.eq(+(isAboutme)).stop(true, true).hide(); 
    }); 
}); 
+0

我試過縮短版本,但它不適用於我的情況。 – Rahul 2010-12-17 08:36:44

+0

@Rahul:[這是一個例子](http://jsfiddle.net/patrick_dw/xsZ9h/)使用縮短的代碼。 – user113716 2010-12-17 13:58:52

+0

。它仍然沒有工作。塊不顯示。我有種感覺,它可能是以下原因之一:1)塊被定義爲Drupal面板中的節點2)它的瀏覽器問題3)JQuery版本問題4)Drupal 5的覆蓋腳本的可能性)由Drupal覆蓋CSS。 – Rahul 2010-12-17 15:26:34

1

您有$("div.aboutme").hover ...。這個控件是否被找到?

1

使用mouseover代替hover

$(document).ready(function(){ 
    $("#aboutme-block").hide(); 
    $("#stories-block").hide(); 

    $("div.aboutme").mouseover(function() { 
    $("#aboutme-block").fadeIn(1000); 
    $("#stories-block").hide(); 
    }); 

    $("div.stories").mouseover(function(){ 
    $("#stories-block").fadeIn(1000); 
    $("#aboutme-block").hide(); 
    }); 
}); 
+0

沒有太大的區別在這兩者之間,'hover'只會將處理程序綁定到'mouseenter'和'mouseleave',但這不應該有所作爲(實際上最好使用'mouseenter'而不是'mouseover'): – 2010-12-16 17:21:54

+0

@elek,hover對於一些閃爍問題和所有問題更好,與代碼相同 – kobe 2010-12-16 17:22:43

+0

@Felix :如果在1000毫秒內從'div.aboutme'轉到'div.stories',可能會出現使用'hover()'的衝突。 'aboutme'處理程序將嘗試''aboutme-block'中的'fadeIn',而'stories'處理程序將嘗試'hide()'它。雖然,我同意使用'mouseenter'而不是'mouseover'。 – user113716 2010-12-16 17:28:14

1

這個問題已經解決了。問題在於運行JQuery的版本。如果您嘗試使用版本1.2.6運行patrick's example,則不起作用。使用更高版本可解決問題。 謝謝各位的幫助:)