Question

I’m trying to make a background fade in when you mouse over a box.

Box1 is the box I mousesover, and hover1 is the new background that comes in. This actually works pretty well. However, it loads the acript, meaning, that if i go crazy with my mouse over the box, the fadeing will continue endless, even when my mouse is standing still. I need to add some kind of stop function..
Content is a text that changes in a contentbox when I mouseover. This works fine.

$("#box1").mouseover(function(){
    $("#background").switchClass("nohover", "hover1", 500);
    $("#content").html(box1);

});

$("#box1").mouseout(function(){
    $("#background").switchClass("hover1", "nohover", 150);
    $("#content").html(content);

});

I’ve also tried with var, but I still have the same problem. If I mouseover fast, the fading keeps running.

    var goeft = 0;
$("#box1").mouseover(function(){
 if(goeft == 0) {
   $("#background").switchClass("nohover", "hover1", 500);
  $("#content").html(box1);
   goeft = 1;
 }
});

$("#box1").mouseout(function(){
    $("#background").switchClass("hover1", "nohover", 150);
   $("#content").html(content);

   goeft = 0;
});

Css code -v-

      /* CSS Document */
       body
      {
      background-color:#B1EB78;
      }

     #wrapper
     {
     border:5px white solid;
     border-radius:15px;
     background-image:url(../images/mill.jpg);
     }

     #header
     {
     height:120px;
     background-image:url(../images/logo.png);
     background-repeat:no-repeat;
     }

     #content
     {
     height:250px;
     background-image:url(../images/trans_white.png);
     border:1px black solid;
     border-radius:5px;
     }

     #space
     {
     height:40px;
     }

     #space2
     {
     height: 10px;
     }

     #box1
     {
     height:250px;
     background-image:url(../images/trans_green.png);
     }




     #background
     {
     width:100%;
     height:100%;
     border-radius:9px;
     }


    .hover1
    {
    background-color:red;

    }

   .nohover
   {

   }

Answer 1

 var goeft = 0;
$("#box1").mouseenter(function(){
 if(goeft == 0) {
   $("#background").switchClass("nohover", "hover1", 500);
  $("#content").html(box1);
   goeft = 1;
 }
});

$("#box1").mouseleave(function(){
    $("#background").switchClass("hover1", "nohover", 150);
   $("#content").html(content);

   goeft = 0;
});

I have no idea about the classes but i think mouseenter and mouseleave are better alternative for mouseout and mouseover