$('.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?

$('.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?

• javascript
• jquery
• css
• scroll
• background-image

• You can't chain to the object from the property assignment. Just make it hidden then set the background image. – Anthony Commented Aug 22, 2014 at 3:37
• No wait. You're trying to set the background image itself to display none. It doesn't work that way. Just remove the image and add back as needed – Anthony Commented Aug 22, 2014 at 3:39
• Code suggestion: Start using animations/transitions with CSS3 to at least keep the #FFF value inside some css class. Otherwise you will have problems with refactoring – Luccas Commented Aug 22, 2014 at 3:43

4 Answers 4

A clean way to do the show and hide would be to use CSS classes to override the background-image property.

Assuming the following CSS class selector is already defined:

.arrow {
    background-image: url("../img/arrow.png");
}

Add another CSS class selector definition:

.arrow.hide-bg {
    background-image: none;
}

Update your JS code portion to add or remove the CSS class accordingly:

if (direction == "up") {
    $("h1").animate({color:"#ffffff"}, 600);
    $('.arrow').removeClass("hide-bg");
} else if (direction == "down") {
    $("h1").animate({color:"#444444"}, 600);
    $('.arrow').addClass("hide-bg");
}

You can hide the image using the hide() function

$('.arrow').hide();

To set the background you can make use of the .css function of jquery like:

$('.arrow').css("background","url('../img/arrow.png')");

I give you another posible solution.

$('.arrow').css('display', 'none');

But it's more mon to do:

$('.arrow').hide();

Try this, hope it works for you.

if (direction == "up") { 
   $('.arrow').css('background-image','../img/arrow.png'); } 
else if (direction == "down") { 
   $('.arrow').css('background-image','none'); 
}