addClass and fadeIn/fadeOut together?

Question

Is it possible to combine together addClass and fadeIn in JS? I'm trying to develop a script where on text hover (the title), the div container change background fading in/out (the whole section).

$(document).ready(function () {
    $('#1st').hover(function () {
        $('#BG').addClass('first');
        $('#BG').removeClass('second');
    });
    $('#2nd').hover(function () {
        $('#BG').addClass('second');
        $('#BG').removeClass('first');
    });
});

I tried to add the fading effect but without success.

$(document).ready(function () {
    $('#1st').hover(function () {
        $('#BG').stop(true, true).addClass('first', 400);
        $('#BG').stop(true, true).removeClass('second', 400);
    });
    $('#2nd').hover(function () {
        $('#BG').stop(true, true).addClass('second', 400);
        $('#BG').stop(true, true).removeClass('first', 400);
    });
});

Is there a way to make them working together?

Thanks in advance for any kind of suggestions :-)

Answer 1

Something like below, you can add/remove class before/after fadeIn/fadeout.

$(document).ready(function(){
    $("#1st").hover(function(){
        $("#BG").fadeOut(400,function(){
            alert("fadeOut() done！");
        });
    });
    $("#2nd").hover(function(){
        $("#BG").fadeIn(400,function(){
            alert("fadeIn() done！");
        });
    });
});