jquery - 悬停时只有一个jquery函数可用于不同的音频文件

Question

我正在悬停文本时开始播放音频，如下所示:

$(".textOne p").hover(function() {

  $(".audioOne")[0].play();
  $(".audioOne")[0].volume = 0;
  $(".audioOne").animate({
    volume: 1
  }, 800);

}, function() {

  $(".audioOne").animate({
    volume: 0
  }, 800);

  timeOutAudio = setTimeout(function() {
    $(".audioOne")[0].pause();
    $(".audioOne")[0].currentTime = 0;
  }, 800);

});

//REPEATING FOR SECOND AUDIOFILE

$(".textTwo p").hover(function() {

  $(".audioTwo")[0].play();
  $(".audioTwo")[0].volume = 0;
  $(".audioTwo").animate({
    volume: 1
  }, 800);

}, function() {

  $(".audioTwo").animate({
    volume: 0
  }, 800);

  timeOutAudio = setTimeout(function() {
    $(".audioTwo")[0].pause();
    $(".audioTwo")[0].currentTime = 0;
  }, 800);

});

但我想避免必须复制每个音频文件和文本的功能。有人知道在这里不重复自己的最好方法是什么吗？

感谢您的帮助。

Answer 1

我的解决方案是使用闭包:

$('.textOne p').hover(onHoverStartPlayAudio('.audioOne'), onHoverEndPauseAudio('.audioOne')) ;
$('.textTwo p').hover(onHoverStartPlayAudio('.audioTwo'), onHoverEndPauseAudio('.audioTwo')));
function onHoverStartPlayAudio(audioName) {
    return function (event) {
        $(audioName).on('timeupdate', function() {
            $(event.target).css({
                "background-size": this.currentTime / this.duration * 100 + '%' + '100%',
            });
        });

        $(audioName)[0].play();
        $(audioName)[0].volume = 0;
        $(audioName).animate({ volume: 1 }, 800);
    } 
}

function onHoverEndPauseAudio(audioName){
    return function() {
        $(audioName).animate({ volume: 0 }, 800);
        timeOutAudio = setTimeout(function() {
            $(audioName)[0].pause();
            $(audioName)[0].currentTime = 0; 
         }, 800);
    } 
} 

然后，在内部函数中，您可以使用audioName，它会根据所悬停的按钮包含.audioOne或.audioTwo。
让我知道解释是否足够清楚。
希望能帮助到你
编辑:
我已经从提供的JSFiddle中添加了代码，将鼠标悬停的元素的CSS更改为timeupdate。