JQuery multiple hover effects not working

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

Could someone tell me what is wrong here?

Not sure what the issue is, but I'd prevent animations from taking place unnecessarily.

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

Here's a shortened version that reuses the same handler:

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

You have $("div.aboutme").hover .... Is this control being found?

use mouseover instead of 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();
  }); 
});

The issue has been solved. The problem was with the version of JQuery running. If you try running patrick's example using version 1.2.6 it does not work. Using a higher version solves the problem. Thanks guys for all the help :)