I have a hover effect whereby an image is being faded out and another is fading in. However, Is there a way for these actions to happen simultaneously? So as one is fading out the other fades in.

My code so far is:

$('.square').mouseenter(function () {
    $(this).attr('data-image', 'two');


fadeOut and fadeIn are asynchronous, so it should be nearly simultaneously.