mouseOver & mouseOut problem

mouseOver & mouseOut problem

Hi all,

it's my first post here, and I think there will follow many of them. I'm relative new to create my own jQuery scripts, but I realy wanna know how it works. Today, I tried to show an image when a user hovers another image. The big problem is: when I hover the picture and my cursor is still on it, the fadeIn and fadeOut of the second image keeps on looping. Do I have to do a callback function or is it something completely different? Here's my code:
 
XHTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>

    <title>Testsite</title>

    <link rel="stylesheet" type="text/css" href="css/test.css" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/test.js"></script>

    </head>
    <body>

    <div id="wrapper">
        <img class="hover" src="images/blauw.jpg" />
        <img class="hidden" src="images/rood.jpg" />
    </div>

    </body>
    </html>



















jQuery:
  1. #wrapper{
    position: relative;
    }

    .hidden{
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    }








CSS:
  1. #wrapper{
    position: relative;
    }

    .hidden{
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    }










Thanks a lot for the given answers and solution(s)!