Jquery背景图像淡入淡出问题答案

【问题标题】：Issue on Jquery Background Image Fade In and OutJquery背景图像淡入淡出问题
【发布时间】：2014-05-15 20:36:04
【问题描述】：

我正在尝试使用以下代码从下拉选择中更改 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();
    }
})

但这不起作用，我在控制台上收到此错误：Uncaught TypeError: undefined is not a function。你能告诉我我做错了什么吗？

【问题讨论】：

标签： jquery css

【解决方案1】：

您收到错误是因为

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

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

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

查看this question 了解渐隐背景的示例

【讨论】：

感谢 CupawnTae，sao 解决方案是什么？如何使用 jquery 效果替换背景图片？
@Behseini 我添加了一个指向应该有帮助的相关问题的链接

【解决方案2】：

褪色背景图像不是一件小事。

您可能应该研究这样的解决方案：Change the body background image with fade effect in jquery

【讨论】：