Fade In Image Fade Out another

Hi,

I am using the following function to fade out one image and fade in another (replacement), however currently this fades out so to white before another image fade in, is it possible to fade ontop gradually so it does not fade out completely?

               
if (dataId != $('img#largeImg').attr('src').replace(/\?(.*)/, '')) {
                    $('img#largeImg').stop().animate({
                        opacity: '0'
                    }, function () {
                        $(this).attr('src', dataId + '?' + Math.floor(Math.random() * (10 * 100)));
                    }).load(function () {
                        $(this).stop().animate({
                            opacity: '1'
                        });
                    });
                }

Open in new window


Any help is appreciated.
sanjshah12Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
The reason this is happening is that you are only start the fade in after the fade out has finished.

What you need to do is start the fade in of the second image at the same time as you start the fade out of the first.

I have put together a sample that demonstrates this
CSS
<style type="text/css">
.imgContainer {
  position: relative;
  width: 800px;
}
.imgContainer img {
  width: 100%;
  position: relative;
}
.imgContainer img:last-child {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
</style>

Open in new window

HTML
  <div class="imgContainer">
    <img src="images/background3.jpg" />
    <img src="" />
  </div>

Open in new window

jQuery
<script>
$(function() {
  var id = 3;
  // LOOP FOREVER
  setInterval(function() {
    // GET NEXT IMAGE
    var nextImage = 'images/background' + (id++ %7+ 1) + '.jpg';

    // ANIMATE VISIBLE IMAGE OUT
    $('.imgContainer img:first-child').animate({
      opacity: 0
    },1500, function() {
      // CLEAR THE INVISIBLE IMAGE
      $(this).attr('src', '');
    });
    // AT THE SAME TIME ANIMATE NEXT IMAGE IN
    $('.imgContainer img:last-child').attr({src: nextImage}).animate({
      opacity: 1
    },1500, function() {
      var parent = $(this).parent();
      // MOVE VISIBLE IMAGE TO FRONT OF QUEUE
      $(this).remove().prependTo(parent);
    });
  }, 5000);
});
</script>

Open in new window

You can see it working here
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
sanjshah12Author Commented:
many thanks Julian, I will test in my application and get back to you shortly.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
css3

From novice to tech pro — start learning today.