リアルタイムでクラスが変更される要素の制御

Question

以下のように連続する「hoge-parent」にリアルタイムで「active」というクラスが付与・削除されます。

<div class="hoge-parent"><div class="hoge-child"></div></div>
<div class="hoge-parent"><div class="hoge-child"></div></div>
<div class="hoge-parent active"><div class="hoge-child" style="display:block;"></div></div>
<div class="hoge-parent"><div class="hoge-child"></div></div>
<div class="hoge-parent"><div class="hoge-child"></div></div>
<div class="hoge-parent"><div class="hoge-child"></div></div>
<div class="hoge-parent"><div class="hoge-child"></div></div>
<div class="hoge-parent"><div class="hoge-child"></div></div>

.hoge-child {
    display:none;
}

「active」が付与された時のみその小要素「hoge-child」をフェードインさせたいです。

以下の内容でデフォルト読み込み時の「hoge-child」の表示はできたのですが、その後リアルタイムで切り替えられる「active」との連動方法がわかりませんでした。

$(function(){
   $('.hoge-parent').each(function(){
    if ($(this).hasClass('active')) {
    $(this).find('.hoge-child').fadeIn();
  } else {
    $(this).find('.hoge-child').fadeOut();
    };
    });
   });

ご教授のほどよろしくお願いいたします。

Answer 1

実装方法によりますが、フェードくらいであればCSSでやるという手もあります。

/* 消えるだけ */
.hoge-child {
	/*display: none;*/
	opacity: 0;
	transition: all 1s ease 0s;
}
.active > .hoge-child {
	/*display: block;*/
	opacity: 1;
}
```**動くサンプル：**[https://jsfiddle.net/fyxrumhk/](https://jsfiddle.net/fyxrumhk/)

---

```CSS
/* 消える＆高さもなくなる */
.hoge-child {
	/*display: none;*/
	height: 0;
	opacity: 0;
	overflow: hidden;
	transition: all 1s ease 0s;
}
.active > .hoge-child {
	/*display: block;*/
	height: 1.23em;
	opacity: 1;
}
```**動くサンプル：**[https://jsfiddle.net/fyxrumhk/1/](https://jsfiddle.net/fyxrumhk/1/)

Answer 2

的確にお応えできるか微妙なのですが回答いたします．

以下の内容でデフォルト読み込み時の「hoge-child」の表示はできたのですが、その後リアルタイムで切り替えられる「active」との連動方法がわかりませんでした。

classをactiveに切り替えている部分（イベントが発生している所）に，activeにした子要素を表示する．と記入する方が自然だと思います．

また，なんらかの理由でこれができない場合，timerでclassがactiveかを常に監視する必要があると思います．

$(function(){
	setInterval(function(){
	//ここに監視処理
	},1000);
});