将鼠标悬停在框上时淡入背景

I've asked this guestion before. But now I'll try to be a bit more specific.I've trying to make a background fade in when you mouse over a box. I've tried 2 different options.Option 1:Box1 is the box it mousesover, and hover1 is the new background that comes in. This actually works pretty well. However, it loads the acript, meaning, that if i just go crazy with my mouse over the box, the fadeing will continue endless, even when my mouse is standing still. Is there a way you can stop it?Content is a text that changes in a contentbox when I mouseover. This worksfine. $("#box1").mouseover(function(){ $("#background").switchClass("nohover", "hover1", 500); $("#content").html(box1);});$("#box1").mouseout(function(){ $("#background").switchClass("hover1", "nohover", 150); $("#content").html(content);});Option 2:Here i add the class hover2 and asks it to fadeín and fadeout. But this doesn't work at all. Somtimes it even removes everything on the side when i take the mouseout of the box.$("#box2").mouseover(function(){ $("#background").addClass("hover2").fadeIn("slow") $("#content").html(box3);});$("#box2").mouseout(function(){ $("#background").removeClass("hover2").fadeOut("slow") $("#content").html(content);});I Use jquery ui.I really hope someone can help me! 解决方案 You can also try to make small changes in the markup/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();});​DEMO: http://jsfiddle.net/bRfMy/ 这篇关于将鼠标悬停在框上时淡入背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！