悬停时不同的音频文件只有一个 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 上更改。

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

Only one jquery function for different audio files on hover

audio

jquery

dry

hover

编辑：