Question

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

这是我的代码，显然不会改变bg。

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)");
     }
});

DEMO

那么如何根据按钮状态更改（切换）背景图像。它必须通过淡化效果来改变。

提前致谢

Answer 1

当您更改背景时，

this指的是beepTwo，而不是#dan。在点击功能的开头添加var self = this，然后在this功能将self更改为.css()。

Answer 2

使用一些简单的CSS并在必要时使用jQuery添加/删除它们。 CSS过渡属性将使其具有淡入淡出效果。将持续时间（0.5秒）调整为您想要的。

另外需要注意的是，您必须在if子句的第一部分$(this)之外取animate，以便正确引用#dan

JS：

$("#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");
     }

});

CSS：

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

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

2 个答案:

JS：

CSS：