Jquery - добавление fadeIn / fadeOut к функции наведения курсора

Question

Хорошо, вот мой текущий код jquery, который при наведении курсора на div "fbox" заменяет фон, изменяя класс для div "fbot"

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



</script>

Теперь я хочу добавить fadeIn и fadeOut к изменяющемуся фону, однако я не уверен в правильном способе сделать это, я пробовал несколько разных вариантов, и это работало, но не в направлении или порядке Я хотел это ..

Мой html для тех div'ов:

<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