Только одна функция jquery для разных аудио файлов при наведении - PullRequest
Новая
       5

Только одна функция jquery для разных аудио файлов при наведении

0 голосов
/ 01 июля 2018

У меня звук, который начинает воспроизводиться при наведении текста, который выглядит следующим образом: 

$(".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 Ответ

0 голосов
/ 01 июля 2018

Мое решение было бы использовать замыкания : 

$('.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 в зависимости от того, какая кнопка была перемещена.

Дайте мне знать, если объяснение достаточно ясное.

Надеюсь, это поможет

Edit:

Я добавил код из предоставленного JSFiddle , CSS элемента поиска будет меняться на timeupdate.

...