Jquery - 将淡入/淡出添加到悬停添加类函数

Question

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

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



</script>

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

这些 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