jquery - Jquery播放/暂停切换与翻转

Question

我有一个用于幻灯片播放/暂停按钮的 jQuery 脚本，可在单击时在两个图像之间切换。有没有办法为正在切换的单独图像添加翻转状态？

这是脚本：

$(".play").toggle(
function () {
$(this).find("img").attr({src:"images/btn-play.png"});
},
function () {
$(this).find("img").attr({src:"images/btn-pause.png"}); 
}
);

这是网站：http ://www.beta.erickdoxey.com （正在进行中）。上一个和下一个按钮具有我想用暂停/播放按钮实现的翻转状态。任何帮助，将不胜感激。

Answer 1

我的建议是向播放按钮添加一个类，然后在悬停时检测该类。我的意思是：

$(".play").toggle(function () {
    $(this).find("img").attr({src:"images/btn-play.png"}).addClass('paused');
}, function () {
    $(this).find("img").attr({src:"images/btn-pause.png"}).removeClass('paused'); 
});

然后你可以像这样在悬停时检测到它：

 if (this).hasClass('paused') {
    $(this).find("img").attr({src:"images/btn-play-hover.png"})
 } else {
    $(this).find("img").attr({src:"images/btn-pause-hover.png"})
 }

您以后也可以进一步将该类用于其他事情。