title: Hide or display none for backgroundImage using jquery
body: <p><code>$('.arrow').backgroundImage="url('../img/arrow.png').style.display = 'none'";</code></p>
  
  <p>I am using an animate.css plugin to hide the down arrow on scroll down. </p>
  
  <pre><code>`$( document ).ready(function() {     
  console.log( "ready!" ); 
      $("h1").animate({color:"#ffffff"}, 600);
      $('.arrow').backgroundImage="url('../img/arrow.png')";`
  
  if (direction == "up") {
      $("h1").animate({color:"#ffffff"}, 600);
      $('.arrow').backgroundImage="url('../img/arrow.png')";
  </code></pre>
  
  <p><code>} else if (direction == "down") { 
          $("h1").animate({color:"#444444"}, 600);
          $('.arrow').backgroundImage="url('../img/arrow.png').style.display = 'none'";</code></p>
  
  <p>The arrow isn't working. Is my function written incorrectly? How do I hide backgroundImage? 
  Is there a better/efficient way to work around this?</p>