使用jQuery设置背景图像只能改变背景一次

我试图根据变量的值设置一个元素的background-image属性。它只有第一次运作。当我切换到就绪状态时，背景图像停止变化。图像本身很小 - 大约8-10 kB。使用jQuery设置背景图像只能改变背景一次

这是我的代码：

if(status != '') { 
    console.log('status'); 
    console.log(status); 

    switch(status) { 
     case 'dev': 
      $('#status').css('background-position','0px -160px'); 
      break; 
     case 'ready': 
      $('#status').css('background-position','0px -240px'); 
      break; 
     case 'soon': 
      $('#status').css('background-position','0px 0px'); 
      break; 
     case 'design': 
      $('#status').css('background-position','0px -80px'); 
      break; 
    } 
    }

这里来CSS的元素：

#status { 
z-index: 1; 
float: right; 
height: 80px; 
width: 80px; 
background: url(/images/front/status-sprite.png); 
background-position: 0px -160px; 
margin: 0 10px 0 0; 
}

行为并没有改变。背景图像会更改为准备就绪，但不会变回。

编辑：使用由csssprites.com生成的精灵来更新代码。

来源

2013-04-11 Elmor

控制台（镀铬）或萤火虫显示的东西？ – steo 2013-04-11 08:40:16

不，完全没有。没有文件丢失的报告等 – Elmor 2013-04-11 08:42:16

第一次后，图像将不会再从服务器加载（如缓存在计算机中）。我想这可能是原因。我通常将图像合并为图像精灵并移动背景位置。请参阅http://css-tricks.com/css-sprites/ – Mifeng 2013-04-11 08:42:47

你的代码似乎很好，我建议验证路径存在每个图像，你试图显示。（不过，如果路径是正确的，你可以覆盖与!important标签样式表）

小提琴

虽然不要紧它不是必须围绕background-image财产上的url()double quotations。

$('#status').css('background-image','url(/images/front/status-design.png)');

来源

2013-04-11 09:02:03 Killrawr

我将我的代码更改为使用css sprites。看到更新后的版本 – Elmor 2013-04-11 09:28:29

@Elmor为精灵提供了一个['link']（http://iforce.co.nz）？我会嘲笑一些事情。你看过小提琴吗？ – Killrawr 2013-04-11 09:31:03

http://csssprites.com/results/61d59f96d349dd88c57948dfbe281760/result.html – Elmor 2013-04-11 09:33:51

使用jQuery设置背景图像只能改变背景一次

回答

相关问题