`$('.arrow').backgroundImage="url('../img/arrow.png').style.display = 'none'";`

I am using an animate.css plugin to hide the down arrow on scroll down. 

```
`$( 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')";

```

`} else if (direction == "down") { 
 $("h1").animate({color:"#444444"}, 600);
 $('.arrow').backgroundImage="url('../img/arrow.png').style.display = 'none'";`

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?