要素が量産されるのを止めたい

Question

前提・実現したいこと

サムネイルをhoverすることで、main画像がフェードで切り替わるアニメーションを作っています。

上記は一応できたのですが、
hoverのタイミングが早いと鼠算的にmain画像が量産されてしまいます。
これを直したいのですが方法が思いつかず、質問させていただきました。
ご教授のほどよろしくお願いいたします。

発生している問題・エラーメッセージ

main画像が量産されてしまう

該当のソースコード

<div class="content">
  <ul class="list">
    <li class=""><a href="" name="images/01.jpg">1</a></li>
    <li class=""><a href="" name="images/02.jpg">2</a></li>
    <li class=""><a href="" name="images/03.jpg">3</a></li>
    <li class=""><a href="" name="images/04.jpg">4</a></li>
  </ul>
</div>

$(function(){

  $(".list a").on({
      "mouseenter":function(){
      var imgPass = $(this).attr("name");
      $(".main_image.next").removeClass("next").addClass("pre");
      if($("div").hasClass("main_image")){
        $(".main_image.pre").before("<div class='main_image pc next'><img src='' alt=''></div>");
      }else{
        $(".content").before("<div class='main_image pc next'><img src='' alt=''></div>");
      }

      $(".main_image.pre").animate({"opacity":0},300);
      $(".main_image.next img").attr("src",imgPass);
      $(".main_image.pre").delay(300).queue(function(){
      $(".main_image.pre").remove();
      });
    }
});

試したこと

アニメーションの時間を調整してみましたが、うまくいきませんでした。

Answer 1

自己解決しました！
生成基準となる要素を唯一無二ものへ変更するだけでした。

$(function(){

  $(".list a").on({
      "mouseenter":function(){
      var imgPass = $(this).attr("name");
      $(".main_image.next").removeClass("next").addClass("pre");
      $(".content").before("<div class='main_image pc next'><img src='' alt=''></div>");

      $(".main_image.pre").animate({"opacity":0},100);
      $(".main_image.next img").attr("src",imgPass);
      $(".main_image.next").animate({"opacity":1},300);
      $(".main_image.pre").delay(500).queue(function(){
        $(".main_image.pre").remove();
      });
    }
});

.content_wrap .main_image{
  &.pre{
  z-index: 2;
  }
  &.next{
    z-index: 1;
    opacity: 0;
  }
}