title: Smoothly changing background while hovering on an element
body: <p>While searching the solution to my problem I've found an answer of the user Arun P Johny about how to make an effect of changing background </p>
  
  <pre><code>jQuery(function(){
      var $body = $('body');
      $('.menu-item-1').hover(function(){
          $body.css('background-image', 'url("yadayadayada.jpg")')
      }, function() {
          $body.css('background-image', '')
      })
  })
  </code></pre>
  
  <p>But how to make a smooth change?</p>