JQuery多个悬停效果不起作用

$(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多个悬停效果不起作用

来源

2010-12-16 Rahul

你为什么觉得有什么不对？你应该解释你想要它做什么以及它实际做了什么。 – 2010-12-16 17:19:16

你能发布关联的HTML吗？ – 2010-12-16 17:19:17

请确保你所有的ids和类名都是正确的 – kobe 2010-12-16 17:23:36

不知道是什么问题，但我想阻止动画的发生不必要的。

$(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(); 
    }); 
});

来源

2010-12-16 17:31:42 user113716

我试过缩短版本，但它不适用于我的情况。 – Rahul 2010-12-17 08:36:44

@Rahul：[这是一个例子]（http://jsfiddle.net/patrick_dw/xsZ9h/）使用缩短的代码。 – user113716 2010-12-17 13:58:52

。它仍然没有工作。块不显示。我有种感觉，它可能是以下原因之一：1）块被定义为Drupal面板中的节点2）它的浏览器问题3）JQuery版本问题4）Drupal 5的覆盖脚本的可能性）由Drupal覆盖CSS。 – Rahul 2010-12-17 15:26:34

您有$("div.aboutme").hover ...。这个控件是否被找到？

来源

2010-12-16 17:19:34

使用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(); 
    }); 
});

来源

2010-12-16 17:20:05 elektronikLexikon

没有太大的区别在这两者之间，'hover'只会将处理程序绑定到'mouseenter'和'mouseleave'，但这不应该有所作为（实际上最好使用'mouseenter'而不是'mouseover'）： – 2010-12-16 17:21:54

@elek，hover对于一些闪烁问题和所有问题更好，与代码相同 – kobe 2010-12-16 17:22:43

@Felix ：如果在1000毫秒内从'div.aboutme'转到'div.stories'，可能会出现使用'hover（）'的冲突。 'aboutme'处理程序将尝试''aboutme-block'中的'fadeIn'，而'stories'处理程序将尝试'hide（）'它。虽然，我同意使用'mouseenter'而不是'mouseover'。 – user113716 2010-12-16 17:28:14

这个问题已经解决了。问题在于运行JQuery的版本。如果您尝试使用版本1.2.6运行patrick's example，则不起作用。使用更高版本可解决问题。谢谢各位的帮助:)

来源

2010-12-18 00:11:26 Rahul

JQuery多个悬停效果不起作用

回答

相关问题