Javascript 音乐暂停时如何更改按钮背景图像

我正在用HTML5创建一个简单的音频播放器，它只有一个按钮。默认情况下，它是自动播放，但如果按下按钮，它将暂停，反之亦然。问题是，每当按下按钮时，我想更改按钮的背景图像

这是我的代码，显然不会改变背景

var beepTwo = $("#musicBeat");
beepTwo[0].play();

$("#dan").click(function() {  
    if (beepTwo[0].paused == false) {
        beepTwo.animate({volume: 0}, 2000, 'swing', function() {
            // really stop the music 
            beepTwo[0].pause();
            $(this).css("background","url (http://goo.gl/w5EWHg)");
        });
     } else {
         beepTwo[0].play();  
         beepTwo.animate({volume: 1}, 2000);
         $(this).css("background","url (http://goo.gl/0GMoZK)");
     }
});

因此，如何根据按钮状态更改（切换）背景图像。它必须通过渐变效果来改变

---

提前感谢

使用一些简单的CSS，必要时使用jQuery添加/删除它们。CSS转换属性将为其提供淡入淡出效果。根据需要调整持续时间（0.5s）

还要注意的是，您必须在if子句第一部分中的

动画

之外使用

$（this）

，以便它正确引用

#dan

JS: CSS:

---

此

指的是更改背景时发出的

beepTwo

，而不是

#dan

。在单击函数的开头添加

var self=this

，并在

.css（）

函数中将

this

更改为

self

。

@daniel感谢您接受我的回答。如果你也能投票支持我的答案，我将不胜感激！

$("#dan").click(function() {  
    if (beepTwo[0].paused == false) {
        beepTwo.animate({volume: 0}, 2000, 'swing', function() {
            // really stop the music 
            beepTwo[0].pause();
        });
        $(this).addClass("is-paused");
     } else {
         beepTwo[0].play();  
         beepTwo.animate({volume: 1}, 2000);
         $(this).removeClass("is-paused");
     }

});

.button.is-paused {
    background-image:url(http://goo.gl/0GMoZK);
    transition: background 0.5s ease;
}