【jquery】３秒ごとに同じ場所に別のメッセージを交互に表示したい

Question

###実現したいこと
AとBのメッセージを3秒ごとに交互に表示したいです。

Aを3回点滅させ、次にBを3回点滅、というのを3秒ごとに繰りかえす感じです。

###該当のソースコード
こちらのメッセージです。「is_open」の有無で表示の切り替えを考えています。

<div class="messages">
  <p class="A animated flash infinite is_open">A</p>
  <p class="B animated flash infinite">B</p>
</div>

点滅もさせたいのでCSSがこちらになります。

/* 
* 基本デザイン
**************************/
.messages {
  position: relative;
}
.A {
    position: absolute;  
    color: red;
}
.B {
    position: absolute;  
    color: blue;
}
p:not(.is_open) {
    display: none;
}

/* 
* アニメーション
**************************/
.animated {
    -webkit-animation-duration: 3s;
    animation-duration:3s;
}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}
.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

###試したこと
setIntervalを使い、クラスのある方からクラスをとって、ない方にクラスをつける。という処理の繰り返しによって実現しようと思ったのですが、これですと、AとBが重なってしまいました。

どうすれば、「A → A → A → B → B → B → A → A → A...」のような点滅を繰り返すことができるでしょうか？

$(function(){
    setInterval(function(){
        $('.messages > p.is_open').removeClass('is_open');
        $('.messages > p:not(.is_open)').addClass('is_open');
    },3000);
});

Answer 1

setIntervalの処理を追うと原因が分かると思います。

1回目の処理

// この時点でAのみがis_openクラスを持っている
$('.messages > p.is_open').removeClass('is_open'); // Aからis_openが外れる
// この時点ではA,Bどれもis_openクラスを持っていない
$('.messages > p:not(.is_open)').addClass('is_open'); // A,B両方にis_openが付く

2回目の処理

// この時点でA,B両方がis_openクラスを持っている
$('.messages > p.is_open').removeClass('is_open'); // A,Bからis_openが外れる
// この時点ではA,Bどれもis_openクラスを持っていない
$('.messages > p:not(.is_open)').addClass('is_open'); // A,B両方にis_openが付く

3回目以降は2回目と同じ処理になります。

jQueryにはtoggleClass()というメソッドがあるのでこちらを試してみてはいかがでしょうか？

$(function(){
    setInterval(function(){
      $('.messages > p').toggleClass('is_open');
    },3000);
});

Comments

[marimon]

ありがとうございます。toggleClass最高！知りませんでした。
ですが、「ふんわり、ふんわり、ふんわり」としたいのに、「ふんわり、ふんわり、カチっ」となってしまうのが難点ですね。クラス付け替えだとそもそもこの「カチっ」は回避できない問題でしょうか？

[hoshito]

クラスを付け替えた瞬間にAもBも`opacity`が1になってしまうことが原因です。このときに`opacity`が1ではなく0であれば自然な切り替えに見えるはずです。

なのでopacityの0と1を修正前と逆にするようにすれば良いですよ。
```
// @-webkit-keyframes flashも同様に修正
@keyframes flash {
from,
50%,
to {
opacity: 0;
}

25%,
75% {
opacity: 1;
}
}
```

ただこれをやると0秒, 1.5秒, 3秒ごとに非表示, 1秒, 2秒ごとに表示になるので「A → A → B → B → ...」という2回ずつの繰り返しになります。

そこでもう一歩工夫してsetIntervalの頻度を4.5秒ごとに実施するようにしましょう。
```
$(function(){
setInterval(function(){
$('.messages > p').toggleClass('is_open');
},4500);
});
```
この方法は必須ではなく`animation-duration`や`flash`の頻度を調節することでもうまくできそうです（そこまでは試していないので予想になります）。

[marimon]

おはようございます。そっかー、最初を0にすればよかったんですね。なんとなく「display: none;」してるからもうカチっしかできないと思いこんでいました。もう一工夫の方もありがとうございます。そのあたりの数字をいじって習得しておきます！