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

Posted 2023-02-25

【中文标题】悬停时对于不同的音频文件只有一个 jquery 函数

【英文标题】：Only one jquery function for different audio files on hover

【发布时间】：2018-07-01 14:37:10

【问题描述】：

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

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

);

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

感谢您的帮助。

【参考方案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 上发生变化。

【讨论】：

感谢您的回答。但是这两个音频文件都会被播放，对吧？还是我看错了？

对不起，我之前没有发现差异，我会更新我的回复

感谢更新。我试过这样：jsfiddle.net/fczb7t8v/3 但它不起作用。猜我做错了什么

你的代码看起来很不错，唯一的问题是你应该只从闭包中返回一个函数。这是onHoverStartPlayAudio的一个闭包，另一个是onHoverEndPauseAudio的闭包。跨度>

完美运行！我能再问你一件事吗？你看到我在之前评论中发送的小提琴中的 css 函数了吗？只为我悬停的 css 选择类的最佳方法是什么？例如：悬停 $(".textOne p") 更改 $(".textOne p").css