0

自分をピアニストとして宣伝するための Web ページを設定しようとしています。

ページの 1 つにクリックできる黒と白のキーがあります。黒鍵をクリックすると、オーディオ プレーヤー (私は HTML5 オーディオ タグを使用しています) が表示されます。問題は、次のキーがクリックされたときに、前のキーのオーディオがまだ続くことです。解決策はJquery(JS?)にあると思いますが、まだよくわかりません。

ウェブページはhttp://www.pianoson.nl/samples.htmです。

これはHTMLです：

<div class="content">
        <div id="p1" class="panel">
            <audio controls="controls" src="media/hallelujah.mp3" codecs="mp3">
                Your browser does not support the audio element.
            </audio>
            <p>Hallelujah - Leonard Cohen</p>
        </div>
</div>

そして、現在、あと5曲ありますが、それを見るとより明確になります。これは現在の JS です。

$(document).ready(function(){

$('.sample').click(
function(){
    var $panel = $('#' + $(this).data("panel"));
    var $visibles = $('.panel:visible')
    $visibles.animate({
            'left' : '2000px',
            'top'  : '0px'
        },2000,function(){
            $(this).hide();
        });

    $panel.animate({
        'left' : '50%',
        'top'  : '50%',
        'margin-left' : '-175px',
        'margin-top' : '-35px'
    },2000).show();
});
});

「飛び込む」最初のオーディオプレーヤーが右にしか飛んでいない理由を誰かが知っている場合は、そのトピックに関するヘルプも大歓迎です。

4

1 に答える 1

0

データの必要性がわかりません。これが私が提案するものです：

$(document).ready(function(){
  var aud = $('audio'), itog = 0;
  $('.sample').each(function(i){
    $(this).click(function(){
      var au = aud[i];
      au.toggle(2000, function(){
        if(itog === 0){
          au.animate({top: '50%', left: '50%', marginTop: '-35px', marginLeft: '-175px'}, 2000); itog = 1;   
        }
        else{
          au.pause(); au.animate({top:0, left:'2000px'}, 2000); itog = 0;
        }
      });
    });
  });
});
于 2013-09-07T23:14:50.187 に答える