画像を三枚重ねて順番に表示させてるアニメーションのレスポンシブができない

画像を三枚重ねて順番に変わっていくアニメーションを使っています
これだけなら問題なく出来たのですが、これをパソコン用のDIVとスマホ用のDIVに分けてレスポンシブしたらレスポンシブが効かなくてなぜかどんどん画像が増えていってしまいます。
どの部分が原因なのかわかりません、、
display: none;してても要素があるからだめなのでしょうか？
!importantを付けて強制してもだめでした

<div class="pc"> <div class="fade-img"> <img class="top2" src="img/pc-1.jpg"> <img class="topbk" src="img/pc-2.jpg"> <img class="top1" src="img/pc-3.jpg"> </div> </div> <div class="sp"> <div class="fade-img"> <img class="top2" src="img/1.jpg"> <img class="topbk" src="img/2.jpg"> <img class="top1" src="img/3.jpg"> </div> </div> <script> $(function () { $(".fade-img img:not(:first-child)").fadeTo(0, 0); setInterval(function () { $(".fade-img img:first-child") .fadeTo(2000, 0) .next("img") .fadeTo(2000, 1) .end() .appendTo(".fade-img"); }, 10000); }); </script> .sp{ display: none; } /*画像差し替えアニメーション*/ .fade-img img{ width: 100%; } .fade-img { position:relative; width: 100%; z-index: 0; } .top1, .top2 { position: absolute; top: 0; left: 0; } @media screen and (max-width: 670px){ .sp{ display: block; } .pc{ display: none; } }