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 回答