JavaScript Fade In/Out issues

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.

My code so far is:

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

Thanks,

Contributors

Replies

17 Hours

Discussion Span

7 Months Ago

Last Updated

Views

Ajh180

Newbie Poster

1 post since Oct 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

7 Months Ago

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

pritaeas

Posting Prodigy

Moderator

9,267 posts since Jul 2006

Reputation Points: 1,173

Solved Threads: 1,456

Skill Endorsements: 86

7 Months Ago

You can see your code working as you expect, here: http://jsfiddle.net/YNhLu/1/

JJenZz

Light Poster

33 posts since Jul 2010

Reputation Points: 27

Solved Threads: 6

Skill Endorsements: 2

This article has been dead for over three months: Start a new discussion instead

You