0

リンクがクリックされたときにjQueryのフェードイン/アウトを使用してページに表示するdivがいくつかあります。各ページには関連する html5 audio 要素があり、それに応じてフェードイン/アウトします。

$('.link').on('click', function(e){
    var targetpage = $($(this).attr("href"));
    $('.pagecontainer>div').fadeOut(0); //fade out currently displayed page
    targetpage.fadeIn(); //fade in page associated with link
    if (targetpage.children().hasClass('backgroundmusic')) {
        $('audio').animate({volume: 0}, 1000); //fade out currently playing audio
        alert('audio faded out');
        $.each($('audio'), function () { //stop all audio
            this.currentTime=0;
            this.pause();
            alert('audio stopped');
        });
        alert('stop function executed');
    }
});

$('.sound').on('play', function () { //since volume was faded out, reset volume when click play button
    $('audio').animate({volume: 1}, 100);
});

HTML:

<a href="#page1" class="link">Audio 1</a>
<a href="#page2" class="link">Audio 2</a>
<a href="#page3" class="link">Audio 3</a>

<div class="pagecontainer">

<div id="page1"> //all three audio elements are in exact same spot
                 //clicking page link fades in current audio and fades in new one
    <div class="backgroundmusic">
    <audio controls loop class="sound" preload="none">
        <source src="../../site/music/music1.mp3"/>
        <source src="../../site/music/music1.ogg"/>
    </audio>
    </div>
</div>

<div id="page2">
    <div class="backgroundmusic">
    <audio controls loop class="sound" preload="none">
        <source src="../../site/music/music2.mp3"/>
        <source src="../../site/music/music2.ogg"/>
    </audio>
    </div>
</div>

<div id="page3">
    <div class="backgroundmusic">
    <audio controls loop class="sound" preload="none">
        <source src="../../site/music/music3.mp3"/>
        <source src="../../site/music/music3.ogg"/>
    </audio>
    </div>
</div>

</div>

"alert('audio faded out')" は実行されますが、"alert('audio stopped')"は"$.each($('audio'), function" スクリプトをまったく実行していないため実行されません。 $('audio').currentTime=0 が機能せず、$('audio').pause() も機能しないため、この「各」スクリプトを使用する必要があります。 、ページに複数のオーディオ インスタンスがあるためです。

これが機能しない理由を誰かが知っていますか?

ありがとう。

4

1 に答える 1

1

関数に渡しeますが、使用しません。おそらく、そのクリックイベントからのデフォルトのアクションを防ぎたいでしょう。

e.preventDefault(); //Put this at the top of the callback

これで .each() の問題が解決するはずです。また、ページがフリーズしないように、アラートの代わりにコンソールを使用する必要があります。

console.log('audio faded out'); //Use console instead of alerts
$('audio').each(function () { //Do it this way.
    this.currentTime=0;
    this.pause();
    console.log('audio stopped');
});
console.log('stop function executed');
于 2013-03-27T15:27:51.973 に答える