0

できるだけ簡単に言えば。

私は1つを持っている

<a href="#" id="PAUSE" class="tubular-pause">Pause</a>

と秒

<a href="#" id="PLAY" class="tubular-play">Play</a>

最初は一時停止だけを表示したいのですが、クリックすると消えて再生が表示されるようになります。

私のビデオの実際の一時停止と再生のトリガーとなるのは、クラスのtubular-pauseとtubular-playです。したがって、クリックのアクションはそのままで、「トグル」の前に発生する必要があると思います。

ありがとうございました！

4

5 に答える 5

1

jquery なしで実行したい場合、これは非常に簡単です。

function onButtonClick () {
  var playButton = document.getElementById("play");
  var pauseButton = document.getElementById("pause");

  if (pauseButton.style.display == "none") {
    pauseButton.style.display = "block";
    playButton.style.display = "none";
  } else {
    playButton.style.display = "block";
    pauseButton.style.display = "none";
  }
}

codepen のデモ。

于 2014-03-12T02:43:04.657 に答える
1

これを使用するだけです：

$('#PLAY').hide();
$('#PAUSE').click(function () {
    $(this).hide();
    $('#PLAY').show('fade');
});
$('#PLAY').click(function () {
    $(this).hide();
    $('#PAUSE').show('fade');
});

デモ：http://jsfiddle.net/fDmLR/

于 2014-03-12T02:46:11.130 に答える
0

を使用してデフォルトでアンカーhide()を非表示にし、を使用して 2 つのアンカー間で表示と非表示を切り替えることができます。#Play.toggle()

$('#PLAY').hide();
$('#PLAY, #PAUSE').click(function () {
    $('#PLAY, #PAUSE').toggle();
});

フィドルのデモ

于 2014-03-12T02:57:48.900 に答える
0

jQueryトグルを使用できます。例えば

$( "#play" ).click(function(){
  ButtonToggles();
});

 $( "#pause" ).click(function(){
   ButtonToggles();
 });

function ButtonToggles(){
   $("#pause").toggle();
   $("#play").toggle();
}
于 2014-03-12T02:46:35.353 に答える
0

次のように jQuery を使用できます。

$("#play").onlclick(function(){
   $("#play").fadeOut(0);
   $("#pause").fadeIn(0);
});
$("#pause").onlclick(function(){
   $("#pause").fadeOut(0);
   $("#play").fadeIn(0);
});

まだまだ初心者なので上手くいかなかったらすみません…

于 2014-03-12T02:34:28.853 に答える