javascriptでイベントを削除する方法

Question

次のように、おはようとおやすみをjavascriptで「ふんわり表示」しているのですが、

<div class="hyoji">表示</div>
  <div class="nakami1">
      <div id="ohayo">おはよう</div>
  </div>
  <div class="nakami2">
      <div id="oyapumi">おやすみ</div>
</div>    
<div class="modosu">戻す</div>

<script>
$('body').on("click",'.hyoji',function(){
  $('.nakami1').fadeIn(1000).delay(3000).fadeOut(1000);
  $('.nakami2').fadeIn(5000).delay(1000);  
});
</script>

この「ふんわり表示」をリセットする方法がわかりません。

次のように書いてもうまくいかないので、間違っているところを教えて頂けませんでしょうか？

<script>
// 「表示」による内容を削除
$('body').on("click",'.modosu',function(){
  $('.nakami1').css('display', 'none');
  $('.nakami2').css('display', 'none'); 
});

// 「表示」によるイベントをリセット★★これがダメ★★
var events = [];
Object.keys($._data($('body').get(0), "events")).forEach(function(k) {
  events[k].forEach(function(o) {
    events.push({
      handler: o.handler,
      selector: o.selector,
    });
  });
});
$(document).off("click", ".hyoji");
</script>

上のコードを書いた実際の動作はこちらです。
https://jsfiddle.net/fosnxn2a/

どうぞ宜しくお願い致します。

Answer 1

要は表示を押下後にアニメーション中に戻るボタンを押下した時、アニメーションを止めて、
再度、表示ボタンを押下しても、最初からアニメーションを行ってほしいということですね？

であれば、簡単なことです。
stop関数には引数を2つ取れます。
一つは、アニメーションキューをクリアするか
もう一つは、直ちにアニメーションを終了の状態にまで持っていくか。

この場合は、戻るボタン押下時に、stop関数の引数に両方ともtrueを指定してアニメーションを直ちに止めて、次のアニメーションも行わないようにして非表示にしてしまえば良いのです。

$('body').on("click",'.hyoji',function(){
  $('.nakami1').fadeIn(1000).delay(3000).fadeOut(1000);
  $('.nakami2').fadeIn(5000).delay(1000);  
$('body').on("click",'.modosu',function(){
  $('.nakami1').stop(true,true).hide();
  $('.nakami2').stop(true,true).hide();  
});

stop関数の詳しい動作については、以下のAPI Documentか、Qiitaの記事を読んでください。

jQuery API Document
Qiita:【jQuery】stopメソッドを理解する

Comments

[jerome.dupuis]

stop(true, true)は確かにベストですね！しかし、また「表示」をクリックすると、アニメーションがリセットされずに、イベントを重ねる。
ですので、こうなります ↓

$('body').on("click",'.hyoji',function(){
$('.nakami1').stop(true,true).hide().fadeIn(1000).delay(3000).fadeOut(1000);
$('.nakami2').stop(true,true).hide().fadeIn(5000).delay(1000);
})
$('body').on("click",'.modosu',function(){
$('.nakami1').stop(true,true).hide();
$('.nakami2').stop(true,true).hide();
}

[LineOfLightning]

「また「表示」をクリックすると、アニメーションがリセットされずに、イベントを重ねる。」というのは、どんな操作をした時にどんなタイミングで表示をクリックした時ですか？
表示と戻すを交互に押すだけであれば、大丈夫な気がしますが・・・
また、表示ボタン押下時にstop関数を呼び出す方法でもできますが、その場合、戻すボタン押下時のstop関数は不要ですね。

[jerome.dupuis]

$('body').on("click",'.hyoji',function() {}) に stop(true,true)を追加するサンプルを作成しました。ご覧ください :)
http://study.jeromedupuis.net/teratail/112346/

[LineOfLightning]

なるほど。
表示ボタンを連続で押下した場合、ということですね。

[退会済みユーザー]

LineOfLightningさん
こんにちは。ご回答どうもありがとうございます。
おお~、それはシンプルで素敵ですね。

>表示と戻すを交互に押すだけであれば、大丈夫な気がしますが

仰るとおりだと思います。

ただ、実は今回はユーザーがいじくるサイトを作っております。ゆえに、そのように「ちゃんと交互に押してくれる」という状況とは限らなそうです。

と、いうわけでして、せっかくシンプルなコードを頂戴したのに恐縮ではございますが、今回はjerome.dupuisさんにベストアンサーを譲ってあげてくださいませ。m(_ _)m

stop関数についてのご説明もありがとうございます。

Answer 2

よっ
ちょっと気になって、方法を探しました。
ひとまず、下記のコードは間違えているので、Javascriptは落ちてます。jsが落ちないように。

var events = [];
Object.keys($._data($('body').get(0), "events")).forEach(function(k) {
  events[k].forEach(function(o) {
    events.push({
      handler: o.handler,
      selector: o.selector,
    });
  });
});

上記のコードが要らないから、使ってないです。

下記は私の方法です。

<div class="hyoji">表示</div>
  <div class="nakami1">
      <div id="ohayo">おはよう</div>
  </div>
  <div class="nakami2">
      <div id="oyapumi">おやすみ</div>
</div>    
<div class="modosu">戻す</div>

<script>
$('body').on({
    'click.myevent': function () {
　　　　　$('.nakami1').fadeIn(1000).delay(3000).fadeOut(1000);
         $('.nakami2').fadeIn(5000).delay(1000);  
    }
}, '.hyoji');

$('body').on("click",'.modosu',function(){
  $('.nakami1').css('display', 'none');
  $('.nakami2').css('display', 'none'); 
});


$('body').off('click.myevent', '.hyoji');

</script>

:)

Comments

[退会済みユーザー]

こんばんは。ありがとうございます。

そちらですと、
https://jsfiddle.net/fosnxn2a/1/
どうやら、、、(>_<)

また何か思いつくことがございましたらぜひご意見くださいませ。

[jerome.dupuis]

あれ？合ってないですか？表示っていうボタンがリセットされたよね。
質問がちゃんと理解出来てないかもしれない。

[退会済みユーザー]

なるほど！

>この「ふんわり表示」をリセットする方法がわかりません。

こう書いた私が悪いです。

くわしく書きますと、「ふんわり表示」は何度も実行したいけれど、「戻す」を押したときに、【ふんわりした動きだけを、リセットさせたい】のです。

「実行」を押したら「ふんわり表示」させて、「戻す」を押したらふんわり表示がなくなり、また「実行」を押したら「ふんわり表示」が【はじめから】始まる。という作動が希望です。

この【はじめから】が質問のコードではできていなかったため、【はじめから】の意味で

>この「ふんわり表示」を【リセット】する方法がわかりません。

と書いたつもり、、でした????

質問のコードだと、「ふんわり表示」が終わってから「表示」を押せば、またふんわり表示するのですけれど、そうじゃなく、「ふんわり表示」の途中で「戻す」を押したら、その時点でふんわりした動きはリセットしてほしい。と、このような意味でした。

[miyabi_pudding]

横槍失礼します。
jQueryのアニメーションを途中で中断させたいときは、
stop()関数を使うとできます。
$(要素).stop().fadein(200);
とか
$(要素).stop().css('display', 'none');
とか。
おそらく、アニメーションさせている途中でcss('display', 'none');
を効かせているから、アニメーションの断続によって、表示が更新されているのだと思います。
（fadein、fadeout関数も、内部的には、animate関数を実行していますので、stop関数が有効です）

[jerome.dupuis]

コメントありがとうございます。
stop()を試してみたが、ちゃんとリセットされてないですね。ただアニメーションは途中に止まっちゃう。

[miyabi_pudding]

そうだ、リセットしないといけないですもんね・・・。
失礼しました。

[jerome.dupuis]

よっ
fadeInやfadeOutのアニメーションを途中に切って、リセットするのはちょっとやりずらいですので、
クリックする時に、表示したいHTMLを再作成。そうすると、イベントがリセットされます。

試してみて:)

<script>

var resetNakami = function() {
$('.nakami1, .nakami2').each(function() {
var clone = $(this).clone()
$(this).replaceWith(clone)
clone.hide()
})
}
$('body').on({
'click.myevent': function () {
resetNakami()
　　　　$('.nakami1').stop().fadeIn(1000).delay(3000).fadeOut(1000);
$('.nakami2').stop().fadeIn(5000).delay(1000);
}
}, '.hyoji');

$('body').on("click",'.modosu', resetNakami)

</script>

[退会済みユーザー]

めっちゃ嬉しいです。できました！！遅くなってしまってすみません。他のコードと組み合わせるのに苦労しておりました。なんとか、、できました。(∩´∀｀)∩
たびたびご返信くださって誠にありがとうございます!!感謝です★

[退会済みユーザー]

めっちゃ嬉しい………