Question

我正在尝试使用以下代码

从下拉列表中选择更改html5画布的背景图像

$('select').on('change', function() {
    if (this.value ==1){
      $('#canvas').css('background-image').fadeOut();
      $('#canvas').css({'background': 'url(http://localhost/MapBox/img/cal_NAs.png) no-repeat top right, url(http://localhost/MapBox/img/bg_sh.png) no-repeat top right','background-color' : 'grey'}).fadeIn();
    }
})

但是这没有完成工作，我在控制台上收到此错误：未捕获的TypeError：undefined不是函数。能不能让我知道我做错了什么？

Answer 1

您收到错误是因为

$('#canvas').css('background-image')

返回＆＃39; background-image＆＃39;的值元素的CSS属性，它是一个字符串。字符串没有名为fadeOut的方法，因此当您尝试拨打fadeOut()时，它会失败。

但是，您有一个更基本的问题 - fadeIn和fadeOut适用于元素，而不适用于元素的样式。

查看this question有关淡化背景的示例

Answer 2

褪色背景图片并非易事。

你应该考虑这样的解决方案：Change the body background image with fade effect in jquery

关于Jquery背景图像淡入淡出的问题

2 个答案: