Javascript 如何在addClass Api和fadein之间进行混合？

我只想通过

addClass

事件给div加上颜色，然后它就会淡入

$("#box1").hover(
    function () {
        $("#box2").addClass("blue");
        $("#box3").addClass("yellow");
    },
    function () {
        $("#box2").removeClass("blue");
        $("#box3").removeClass("yellow");
    }
);

$("#box2").hover(
    function () {
        $("#box1").addClass("blue");
        $("#box4").addClass("yellow");
    },
    function () {
        $("#box1").removeClass("blue");
        $("#box4").removeClass("yellow");
    }
);

---

我知道这很难看，但它成功了：

$('#box1').hover(function () {
  $("#box2").fadeOut(0).addClass('blue').fadeIn(300);
},
function () {
  $("#box2").fadeOut(300).queue(function(){ $(this).removeClass('blue').fadeIn(0).dequeue()});
});

此处演示：