ボックスの上にマウスを置くと、背景がフェードインするようにしようとしています。
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);
});
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
{
}