1

以前、このゲストに質問したことがあります。しかし、今はもう少し具体的にしようと思います。

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

オプション 1: Box1 はマウスオーバーしたボックスで、hover1 は入ってくる新しい背景です。これは実際にはかなりうまく機能します。ただし、acript が読み込まれます。つまり、ボックス上でマウスを夢中にすると、マウスが静止している場合でもフェードが無限に続きます。止める方法はありますか？コンテンツは、マウスオーバーするとコンテンツ ボックス内で変化するテキストです。これはうまくいきます。

$("#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を使用しています。誰かが私を助けてくれることを本当に願っています！

4

2 に答える 2

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/

于 2012-05-10T11:51:48.520 に答える
0

その変数が特定の値を持つ場合にのみ、効果の実行を制御する変数を追加してみてください。そして、効果が実行されたときにその値を変更します。

このようなもの：

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;
});
于 2012-05-10T11:49:10.090 に答える