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

执行show和hide的一种简洁方法是使用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();

使用jquery为backgroundImage隐藏或显示none

4 个答案: