ボックスをマウスオーバーすると背景が薄くなります

Question

私は以前このゲストに尋ねました。しかし、今私は少し具体的にしようとします。

私はボックスの上にマウスを置いたときに背景をフェードインしようとしました。私は2つのオプションを試しました。

オプション1： 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); 

}); 

オプション2： ここで私はクラスhover2を追加して、フェードインとフェードアウトすることを要求します。しかし、これはまったく機能しません。いつかは、ボックスのマウスアウトを取るときに側面のすべてを取り除くことさえある。

$("#box2").mouseover(function(){ 
    $("#background").addClass("hover2").fadeIn("slow") 
    $("#content").html(box3); 
}); 

$("#box2").mouseout(function(){ 
    $("#background").removeClass("hover2").fadeOut("slow") 
    $("#content").html(content); 
}); 

私はjquery uiを使用します。 私は本当に誰かが私を助けることを願っています！

Answer 1

あなたはまた、マークアップ/ CSSの小さな変化を作ってみることができます。

HTML：

<div id="box"> 
    <div id="background"></div> 
    <div id="content"></div> 
</div> 

CSS：

#box { 
    position: relative; 
    /* ... */ 
} 
#background { 
    position: absolute; 
    display: none; 
    top: 0; 
    left: 0; 
    width: inherit; 
    height: inherit; 
    background-image: url(...); 
    z-index: -1; 
}​ 

はJavaScript：

$("#box").hover(function() { 
    $("#background").fadeIn(); 
}, function() { 
    $("#background").stop().fadeOut(); 
});​ 

デモ：http://jsfiddle.net/bRfMy/

Answer 2

エフェクトの実行を制御する変数を追加して、その変数が特定の値を持つ場合にのみ、エフェクトの実行を制御してください。エフェクトが実行されたときにその値を変更します。このような

何か：

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); 
    // sets its value back to 0 if you want the next mouseover execute the effect again 
    goeft = 0; 
});