使用jQuery淡出视频或音频的音频

Question

I have a page that uses both the video and audio tag. The video first plays and then after that video has ended the audio starts playing.

I am trying to get the audio from each of them to stop with a fade out. I've tried using the animate function but nothing is changing. Below is my code:

The fade out code should be placed within case 119 (When W pressed). The audio has a ID tag of audio

    $(document).keypress(function(event){

    // This variable holds the video ID
    var video = document.getElementById('video');

    // This variable holds the value of the key pressed
    var keycode = (event.keyCode ? event.keyCode : event.which);

    switch(keycode) {
        // Opening Page - This page features the fashion show poster
        case 113:
            window.location.href = "Opening.html";
            break;

        // Fade Volume
        case 119:
            $('body').fadeOut(1000);
            video.animate({volume: 0.0}, 1000);
            break;

        // This will open the media for Lana's walk
        case 101:
            window.location.href = "Lana.html";
            break;

        // This will open the media for Eden's walk
        case 114:
            window.location.href = "Eden.html";
            break;

        // This will open the media for Laura's walk
        case 116:
            window.location.href = "Laura.html";
            break;

        // This will open the media for the first media performance
        case 121:
            window.location.href = "MediaOne.html";
            break;

        // This will open the media for Kathleen's walk
        case 117:
            window.location.href = "Kathleen.html";
            break;

        // This will open the media for Jazzy's walk
        case 105:
            window.location.href = "Jazzy.html";
            break;

        // This will open the media for Flora's walk
        case 111:
            window.location.href = "Flora.html";
            break;

        // This will open the media for the second media performance
        case 112:
            window.location.href = "MediaTwo.html";
            break;

        // This will open the media Illiana's walk
        case 97:
            window.location.href = "Illiana.html";
            break;

        // This will open the media for Anna's walk
        case 115:
            window.location.href = "Anna.html";
            break;

        // This will open the media for Estelte's walk
        case 100:
            window.location.href = "Estelle.html";
            break;

        // This will open the media for the fianle
        case 102:
            window.location.href = "Finale.html";
            break;

        // This will play or pause the video that is currently playing
        case 32:
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
            break;

        // This default case will return to the opening page in case of an error
        default:
            window.location.href = "Opening.html";
    }

any help will be awesome!

Answer 1

You must use a jQuery Object:

      $('#video').animate({
        volume: 0.0
      }, 1000);

video variable is a plain JavaScript object which is not recognized by a jQuery method (in this instance, .animate() )

Reference

SNIPPET

 $(document).keypress(function(event) { // This variable holds the video ID var video = document.getElementById('video'); // This variable holds the value of the key pressed var keycode = (event.keyCode ? event.keyCode : event.which); switch (keycode) { // Opening Page - This page features the fashion show poster case 113: window.location.href = "Opening.html"; break; // Fade Volume case 119: $('body').fadeOut(1000); $('#video').animate({ volume: 0.0 }, 1000); break; // This will open the media for Lana's walk case 101: window.location.href = "Lana.html"; break; // This will open the media for Eden's walk case 114: window.location.href = "Eden.html"; break; // This will open the media for Laura's walk case 116: window.location.href = "Laura.html"; break; // This will open the media for the first media performance case 121: window.location.href = "MediaOne.html"; break; // This will open the media for Kathleen's walk case 117: window.location.href = "Kathleen.html"; break; // This will open the media for Jazzy's walk case 105: window.location.href = "Jazzy.html"; break; // This will open the media for Flora's walk case 111: window.location.href = "Flora.html"; break; // This will open the media for the second media performance case 112: window.location.href = "MediaTwo.html"; break; // This will open the media Illiana's walk case 97: window.location.href = "Illiana.html"; break; // This will open the media for Anna's walk case 115: window.location.href = "Anna.html"; break; // This will open the media for Estelte's walk case 100: window.location.href = "Estelle.html"; break; // This will open the media for the fianle case 102: window.location.href = "Finale.html"; break; // This will play or pause the video that is currently playing case 32: if (video.paused) { video.play(); } else { video.pause(); } break; // This default case will return to the opening page in case of an error default: window.location.href = "Opening.html"; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

 const audio = document.querySelector("audio"); audio.play(); if(audio.paused === false){ var fadeOut = setInterval(function(){ audio.volume = audio.volume -= 0.1; if(audio.paused === true){ clearInterval(fadeOut); } },500); } 

 <audio src="https://f001.backblazeb2.com/b2api/v1/b2_download_file_by_id?fileId=4_z21ba257aafcf0ce2568a021f_f114c19c5768b55e7_d20161029_m042628_c001_v0001019_t0022" controls autoplay/>