1

Please look at this fiddle http://jsfiddle.net/rabelais/zDu2s/1/

There are three bars that when clicked play/pause music. The divs also animate on click.

When the animation is complete a refresh button appears and resets the animation width to 0.

My question is how can I make the song and animation restart when the refresh button is clicked on.

I am only displaying a small amount of the code below as there is so much and one really ned to look at the fiddle above to see all the code. 

var $sounds = $('.sound'),
$bars = $('#sound-bars .bars');
$bars.click(function () {
var $this = $(this),
    $target = $($this.data('target')),
    target = $target[0];
$bars.not(this).removeClass('playing');
$sounds.not($target).each(function () {
    this.pause();
});

$this.toggleClass('playing');
if ($this.hasClass('playing')) {
    target.play();
} else {
    target.pause();
}
})
4

2 回答 2

0

您应该能够在刷新按钮单击事件中触发单击事件。

$("#refresh-1").click(function () {
    $(".alt0").width(0);
    $("#one").removeClass('active');
    $("#one").trigger("click");
    $(this).hide();
})

您可能必须修改刷新代码以清除任何阻止立即再次播放声音/动画的类。我能够与.removeClass('active')

于 2013-11-08T16:14:14.910 回答
0

要重新开始音频，您可以使用currentTime并将其设置为 0。正如@Robb 建议的那样，您还可以触发特定栏的单击以重新开始动画。您还需要从栏中删除playing和类。active

$('#refresh-1').click(function () {
   $('.alt0').width(0);
   $('.alt0').stop();
   $(this).hide();
   $('#sound-1')[0].pause();
   $('#sound-1')[0].currentTime = 0;
   $('#one').removeClass('active playing');
   $('#one').click();
})

我假设栏的动画应该显示音轨的当前位置与总持续时间。您可以使用音频 API 功能duration来获取音频文件的总持续时间（以秒为单位），然后您可以在动画的持续时间中使用它，如下所示：

var $this = $(this),
    $target = $($this.data('target')),
    target = $target[0];
$('.alt0').animate({ //start animation
   width: $(this).width()
}, target.duration * 1000, "linear", function () {
   $("#refresh-1").show();
});
于 2013-11-08T17:03:43.363 回答