Jquery - 将 fadeIn / fadeOut 添加到悬停 addclass 函数

Question

好吧，这是我当前的 jquery 代码，它在 div“fbox”悬停时通过更改 div“fbot”的类来替换背景

    <script>
 $(document).ready(function () {
$(function() {
     $("#fbox").hover(function () {
        $("#fbot").addClass("fboto");
    },
    function () {
        $("#fbot").removeClass("fboto");
    });
});
});



</script>

现在我想要的是将 fadeIn 和 fadeOut 添加到不断变化的背景中，但是我不确定正确的方法，我尝试了一些不同的安排，但它的工作方式只是不按照我想要的方向或顺序..

我的那些div的html：

<div id="fbox">
<div id="ftop"></div> <!-- top of fullbox -->



<!-- middle of fullbox -->
<div id="fmid">
<!-- content for the fullbox goes BELOW here -->


<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />


<!-- content for the fullbox goes ABOVE here -->
</div>
<!-- end middle of fullbox -->



<div id="fbot" class="fbot"></div> <!-- bottom of fullbox -->

</div>

我用于更改背景图像的简单css..：

.fboto {
  width: 934px;
  background:url(images/cb/fboto.png) no-repeat;
  height: 17px;
  margin:0
 }

任何帮助会很好，谢谢！

Answer 1

jQuery UI 允许您以动画方式添加和删除类。只需包含 jQuery UI 的插件，您就可以执行以下操作：

$("#fbot").addClass("fboto",duration,callBack);
$("#fbot").removeClass("fboto",duration,callBack);

如需进一步参考： jQuery UI addClass