使用jQuery隐藏或不显示backgroundImage [英] Hide or display none for backgroundImage using jquery

问题描述

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

我正在使用animate.css插件来隐藏向下滚动时的向下箭头.

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

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

箭头不起作用.我的函数编写不正确吗?如何隐藏backgroundImage? 有没有更好/有效的方法来解决此问题?

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?

推荐答案

进行显示和隐藏的一种干净方法是使用CSS类覆盖background-image属性.

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

假设以下CSS类选择器已经定义:

Assuming the following CSS class selector is already defined:

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

添加另一个CSS类选择器定义:

Add another CSS class selector definition:

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

更新您的JS代码部分以相应地添加或删除CSS类:

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

这篇关于使用jQuery隐藏或不显示backgroundImage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！