javascript - 使用 jquery 隐藏或不显示 backgroundImage

Question

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

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

`$( 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({颜色:"#444444"}, 600);
$('.arrow').backgroundImage="url('../img/arrow.png').style.display = 'none'";

箭头不起作用。我的函数写错了吗？如何隐藏背景图像？有没有更好/更有效的方法来解决这个问题？

Answer 1

显示和隐藏的一种简洁方法是使用 CSS 类覆盖 background-image 属性。

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

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

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

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

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

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