fadeIn, fadeOut issue

[ajh108]

Hi,

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.

The second image is displayed none on page load.

My code so far is:

$('.square').mouseenter(function () {
    $(this).attr('data-image', 'two');
    $(this).find('.one').fadeOut('medium');
    $(this).find('.two').fadeIn('medium');
});

Thanks,

[felgall]

What you are looking for is usually called a cross fade.

I am not sure whether the JavaScript framework you are using one provides that functionality but it is definitely possible to do using JavaScript.

[VIPStephan]

Originally Posted by ajh108

However, Is there a way for these actions to happen simultaneously? So as one is fading out the other fades in.

That is exactly what should happen with your code. What’s the problem?