Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    fadeIn, fadeOut issue

    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:
    Code:
    $('.square').mouseenter(function () {
        $(this).attr('data-image', 'two');
        $(this).find('.one').fadeOut('medium');
        $(this).find('.two').fadeIn('medium');
    });
    Thanks,

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,608
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Quote Originally Posted by ajh108 View Post
    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?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •