Mouseover script gets wonky when interrupted

Mouseover script gets wonky when interrupted

I have a jquery script that causes an image to change when links are rolled over. You can see it in action here:

http://annmarietherapy.com/index.php

Everything goes fine unless the another link is rolled over while the fade is in process. Here's the script that runs the fades:

  1. $(function () {


    $("#contact-link").mouseover(function () {
    var $active = $('#homepage-image .active');
        $("#contact-image").css('z-index', 2).addClass('next');
        $active.fadeOut(1500, function() {
        $active.css('z-index', 1).show().removeClass('active');
        $("#contact-image").css('z-index', 3).addClass('active');
    });
    });

    $("#aboutme-link").mouseover(function () {
    var $active = $('#homepage-image .active');
        $("#aboutme-image").css('z-index', 2).addClass('next');
        $active.fadeOut(1500, function() {
        $active.css('z-index', 1).show().removeClass('active');
        $("#aboutme-image").css('z-index', 3).addClass('active');
    });
    });

    $("#howiwork-link").mouseover(function () {
    var $active = $('#homepage-image .active');
        $("#howiwork-image").css('z-index', 2).addClass('next');
        $active.fadeOut(1500, function() {
        $active.css('z-index', 1).show().removeClass('active');
        $("#howiwork-image").css('z-index', 3).addClass('active');
    });
    });

    $("#contact-link").mouseover(function () {
    var $active = $('#homepage-image .active');
        $("#contact-image").css('z-index', 2).addClass('next');
        $active.fadeOut(1500, function() {
        $active.css('z-index', 1).show().removeClass('active');
        $("#contact-image").css('z-index', 3).addClass('active');
    });
    });

    $("#changes-link").mouseover(function () {
    var $active = $('#homepage-image .active');
        $("#results-image").css('z-index', 2).addClass('next');
        $active.fadeOut(1500, function() {
        $active.css('z-index', 1).show().removeClass('active');
        $("#results-image").css('z-index', 3).addClass('active');
    });
    });

    $("#home-link").mouseover(function () {
    var $active = $('#homepage-image .active');
        $("#home-image").css('z-index', 2).addClass('next');
        $active.fadeOut(1500, function() {
        $active.css('z-index', 1).show().removeClass('active');
        $("#home-image").css('z-index', 3).addClass('active');
    });
    });

    });   


























































I'm new to jQuery. I suspect that inserting a .stop() for each link, with some parameters, might solve the problem, but I don't know how to go about doing that. Any help is greatly apprecated. Thanks!