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

箭頭不起作用。 我的函數書寫不正確嗎？ 如何隱藏backgroundImage？ 有沒有更好/有效的方法來解決此問題？

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

Answer 2

您可以使用hide（）函數隱藏圖像

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

要設置背景，您可以使用jquery的.css函數，例如：

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

Answer 3

試試這個，希望它對您有用。

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

Answer 4

我給你另一個可行的解決方案。

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

但是更常見的是：

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