JQuery 多个悬停效果不起作用

Question

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

有人可以告诉我这里出了什么问题吗？

Answer 1

不确定问题是什么，但我会阻止不必要的动画发生。

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