使用jquery为backgroundImage隐藏或显示none
$('.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'";
箭头不起作用。 我的function写得不正确吗？ 如何隐藏backgroundImage？ 有没有更好/更有效的方法来解决这个问题？
一个干净的方式来显示和隐藏将使用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"); }
您可以使用hide（）函数隐藏图像
$('.arrow').hide();
要设置背景，您可以使用jquery的.css函数，如：
$('.arrow').css("background","url('../img/arrow.png')");
我给你另一个可行的解决方案。
$('.arrow').css('display', 'none');
但它更常见：
$('.arrow').hide();
试试这个，希望它适合你。
if (direction == "up") { $('.arrow').css('background-image','../img/arrow.png'); } else if (direction == "down") { $('.arrow').css('background-image','none'); }