0

At the moment when I hover over each li, the corresponding image fades in and out. However when i hover from one nav li to another, the fade out of the first image is interrupted and the second image fades in. I am looking for a smooth cross fade from of the images when I hover from one nav li to another. similar to the effect in this website: http://www.bonnieroccelli.com/

Any help would be massively appreciated!

html:

        <div class="banner-nav-wrap">
                <ul>
                    <li class="banner-nav-item" data-img="images/home-banner.png">List item 1</li>
                    <li class="banner-nav-item" data-img="images/1.jpg">List item 2</li>
                    <li class="banner-nav-item" data-img="images/6.jpg">List item 3</li>
                </ul>
        </div>

jquery: 

<script type="text/javascript">
 $('.banner-nav-item').hover(function() {
      var img = $(this).attr('data-img'); 
      $('img#hover-img').css({"display" : "none"});
      $('img#hover-img').fadeIn('slow').attr('src', img);
   },function() {
      $('img#hover-img').fadeOut('slow');
   });

</script>
user3163317
  • 3
  • 3
  • possible duplicate of [How to build simple jQuery image slider with sliding or opacity effect?](http://stackoverflow.com/questions/12608356/how-to-build-simple-jquery-image-slider-with-sliding-or-opacity-effect) – avall Mar 30 '14 at 17:40

1 Answers1

0

Try the following. Edited. Now it works like you want but I think it looks much worse than earlier.

$('.banner-nav-item').hover(function() {
  var img = $(this).attr('data-img'); 
  $('img#hover-img').fadeOut("slow", function(){
    $(this).fadeIn('slow').attr('src', img);
  });
},function() {
  $('img#hover-img').stop(true,true).fadeOut('slow');
});

Edit2: The link you pasted is crossfading which is something different than you asked.

avall
  • 2,025
  • 2
  • 16
  • 28
  • Thanks for the response. Now it begins the animation on hover but if I hover again it pauses the animation. Any suggestions? the effect i'm looking for is something like this: http://www.bonnieroccelli.com/ – user3163317 Mar 25 '14 at 19:05
  • Apologies, that effect in the link is actually what i'm after. do you have any suggestions for this effect? – user3163317 Mar 25 '14 at 19:33
  • Yes. Use 2 images in a smart way :). – avall Mar 25 '14 at 19:52