Jquery - background fade。

Question

私はボックスの上にマウスを置いたときに背景をフェードインしようとしています。

Box1は私のマウスオーバーで、ホバー1は新しい背景です。これは実際にはうまくいきます。しかし、それは、私のマウスが箱の上に夢中になると、マウスが静止していても、無限に続くことを意味するacriptをロードします。何らかの停止機能を追加する必要があります。 コンテンツは、マウスオーバーするとcontentboxで変更されるテキストです。これは正常に動作します。

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

}); 

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

}); 

私もvarで試しましたが、同じ問題があります。私が早くマウスオーバーすると、フェーディングが動き続けます。

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コード-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; 
}); 

私はクラスについては考えているが、私はMouseEnterイベントを考えるとmouseleaveは[あなたはすでにきたマウスアウトやマウスオーバー