Hide or display none for backgroundImage using jquery

问题

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

回答1:

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");
}

回答2:

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

回答3:

I give you another posible solution.

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

But it's more common to do:

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

回答4:

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'); 
}

来源：https://stackoverflow.com/questions/25439145/hide-or-display-none-for-backgroundimage-using-jquery

标签

javascript

jquery

css

scroll

background-image