0

我试图在按下另一个 div 时更改一个 div 的背景图像。我正在使用 jQuery 并发现这样做...

$('#input_id').click(function() {
  $('#div_id').css('background-image','url')
});

但是，我需要它做的不仅仅是改变一个 div 的背景图像，它还必须为其他几个设置动画。

我目前正在使用...

$('#input_id').click(function() {
$('#div1').animate({
    left: '0px'
}, 600);
$('#div2').animate({
    left: '-100%'
}, 1000);
$('#div3').animate({
    right: '-100px'
}, 200);
$('#div4').animate({
    top: '0px'
}, 600);
});

这工作正常，可以做我需要的一切，但是当我将它添加到列表中时......

$('#div5').css({
    'background-image', 'url(../images/backgrounds/background2.png)');

它完全停止工作。这是我的完整代码...

$('#input_id').click(function() {
$('#div1').animate({
    left: '0px'
}, 600);
$('#div2').animate({
    left: '-100%'
}, 1000);
$('#div3').animate({
    right: '-100px'
}, 200);
$('#div4').animate({
    top: '0px'
}, 600);
$('#div5').css({
    'background-image', 'url(../images/backgrounds/background2.png)');
});

我的第 5 部分的 CSS 背景图像代码是...

#div5 {
...
background-image:url(../images/backgrounds/background1.png);
...
}

任何人都可以看到为什么这不起作用的任何原因吗？我是否做了明显错误的事情，或者在某处遗漏了什么？

4

5 回答 5

2

有两件事...

$('#div5').css({
    'background-image': 'url(images/backgrounds/background2.png)'
});

首先，那段代码的末尾有一个语法错误（两个右括号）。

其次，这纯属猜测，但您的 CSS 文件可能位于 css（或样式）文件夹中。从那里引用图像文件夹是正确的../images，但不能从页面中运行的脚本中引用。（注意我删除了前导../）。

于 2013-02-12T15:41:33.320 回答
2

你错过了什么"});"

    $('#input_id').click(function() {
    $('#div1').animate({
        left: '0px'
    }, 600);
    $('#div2').animate({
        left: '-100%'
    }, 1000);
    $('#div3').animate({
        right: '-100px'
    }, 200);
    $('#div4').animate({
        top: '0px'
    }, 600);
    $('#div5').css({
        'background-image', 'url(../../images/backgrounds/background2.png)');
    });
});
于 2013-02-12T15:43:24.763 回答
2

我建议不要将实际的 css 放在 jQuery 中，因为这会变得很难维护。

而是使用 jQuery 添加一个类并在 css 文件中指定背景属性。

$('#div5').addClass("myclass");

.myclass {
    background-image: url(images/backgrounds/background2.png);
}

然后，您可以根据需要使用 removeClass() 方法将其删除。

$('#div5').removeClass("myclass");
于 2013-02-12T15:43:55.437 回答
1

您的

$('#div5').css({
    'background-image', 'url(../images/backgrounds/background2.png)');

包含一个{

$('#div5').css('background-image', 'url(../images/backgrounds/background2.png)');
于 2013-02-12T15:43:14.003 回答
1

试试这个：

$('#div5').css('background-image', 'url(../images/backgrounds/background2.png)');
于 2013-02-12T15:45:32.607 回答