0

我有一些 div，当单击链接时，我使用 jQuery 的淡入/淡出将其带到页面上。每个页面都有一个相关的 html5 音频元素，该元素也会相应地淡入/淡出。

$('.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” 脚本，“alert('stop function executed')”也没有。我必须使用这个“each”脚本，因为 $('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 回答