title: How to fade out a background image on mouse leave of another element with HTML data
body: <p>I am trying to get an effect when a user hovers over an anchor tag, such that a parent div will fade in a particular background (different backgrounds for different anchors). The result I'm getting is okay, but not nearly as smooth as I'd like it to be.</p>
  
  <p>Here is the jsfiddle link: <a href="https://jsfiddle.net/GJL2K/8cwcdthe/6/" rel="nofollow">https://jsfiddle.net/GJL2K/8cwcdthe/6/</a></p>
  
  <p>Here is the Javascript:</p>
  
  <pre><code>$(function () {
      $('.description').hide();
      $('.page-right li a').on('mouseenter', function(event) {
             // console.log(this);
             event.stopPropagation();
  
             var $background = "url('" + $(this).attr('data-background') + "')";
  
             $(this).parents('.page-right')
                 .find('#back')
                 .stop()
                 .animate({opacity: .5}, 0)
                 .css({'background': $background})
                 .animate({opacity: .75}, 1000);
      });
  
      //    $('.page-right li a').on('mouseleave', function(event) {
      //        $('.description').slideUp();
      //        // console.log(this);
      //        event.stopPropagation();
      //                      
      //        $(this).parents('.page-right').find('#back')
      //            .stop
      //            .animate({opacity: .5}, 0)
      //            .css({'background': 'none'})
      //            .animate({opacity: 1}, 1000, 'easeInQuad', 
      //                function () {$('.description').slideUp();
      //        });    
      //    });
  
      $('.page-right li a').on('click', function(event) {
              event.preventDefault();
              $(this).parent().next().slideToggle('fast');
      });
  });
  </code></pre>
  
  <p>The problem is that when you hover over the next link, the first background disappears, and the next one jumps in its place.  It would be better to have the first background fade out before the next one fades in, but as you can see from the commented code, I didn't figure out the <code>mouseleave</code> event.</p>
  
  <p>I have looked at other code, and I think I may have gone down the wrong road. I'd rather have a fadeOut/fadeIn effect which seems to have as smoother transition, but I've only seen it work for two background images, not for all the images I'll need.</p>
  
  <p>How can I make this image transition more smooth and seamless?</p>