画面幅に応じてjavascriopt(jQuery)を変更する。

Question

画面幅に応じてjavascriopt(jQuery)を変更する。

画面幅を変えてもアニメーションが切り替わらない(ブラウザを更新すれば変わる)

該当のソースコード

const mediaQuery=window.matchMedia('(min-width:769px)')
function handleTableChange(e){
  if(e.matches){
     //jQueryの処理
$(function(){

  $("#bg-img").fadeIn(3000);
$(".smartheader button").hide();
$("header nav ul").show();
  $(".pink p").hover(function(){
    $(this).animate({"padding":"80px 60px"},300),
     $("body").append('<div class="designtrip"></div>'),
     $("body").append('<div class="design"><p></p></div>');
      $(".design").css("top",$(this).offset().top+$(this).parent().height()+100);
        $(".design").css("left","270px");
       $(".designtrip").css("left",$(this).offset().left+70);
      $(".designtrip").css("top",$(this).offset().top+$(this).parent().height()+52);

     $(".design p").html($(this).parent().attr("alt"));

  },function(){
      $(this).animate({"padding":"60px 40px"},300),
      $(".design").fadeOut(300),$(".designtrip").fadeOut(300);
      $("design").remove(),
      $("designtrip").remove();
  });
  $(".yellow p").hover(function(){
    $(this).animate({"padding":"80px 40px"},300),
   $("body").append('<div class="designtrip"></div>'),
    $("body").append('<div class="design"><p></p></div>');
      $(".design").css("top",$(this).offset().top+$(this).parent().height()+100);
    $(".design").css("left","270px");
    $(".designtrip").css("left",$(this).offset().left+58);
   $(".designtrip").css("top",$(this).offset().top+$(this).parent().height()+52);
    $(".design p").html($(this).parent().attr("alt"));

  },function(){
      $(this).animate({"padding":"60px 20px"},300),
        $(".design").fadeOut(300),$(".designtrip").fadeOut(300);
        $("design").remove(),
        $("designtrip").remove();
    });
  $(".blue p").hover(function(){
    $(this).animate({"padding":"80px 50px"},300),
    $("body").append('<div class="designtrip"></div>'),
    $("body").append('<div class="design"><p></p></div>');
      $(".design").css("top",$(this).offset().top+$(this).parent().height()+100);
    $(".design").css("left","270px");
    $(".designtrip").css("left",$(this).offset().left+40);
   $(".designtrip").css("top",$(this).offset().top+$(this).parent().height()+52);
    $(".design p").html($(this).parent().attr("alt"));

  },function(){
      $(this).animate({"padding":"60px 30px"},300),
        $(".design").fadeOut(300),$(".designtrip").fadeOut(300);
        $("design").remove(),
        $("designtrip").remove();
    });
    // work
    $(".workimg a").append("<div>");
    $(".workimg a div").each(function(){
      $(this).html("<p>"+$(this).parent().children("img").attr("alt")+"</p>");
      $(this).children("p").css("top",$(this).height()/3);
    });
    $(".workimg a").hover(function(){
        $(this).children("div").stop().fadeIn();
    },function(){
      $(this).children("div").stop().fadeOut();
    });

// contact
$(".alert").hide();
$(".button").click(function(){
  var sendFlag=true;
  if(!$(".name").val()){
    $(".form-text .alert").show();

    sendFlag=false;
  }
  else{
      $(".form-text .alert").hide();
  }
  if(!$("#email").val()){
    $(".form-mail .alert").show();
    sendFlag=false;
  }
  else{
      $(".form-mail .alert").hide();
  }

  if(!$("#message").val()){
    $(".form-message .alert").show();
    sendFlag=false;
  }
  else{
      $(".form-message .alert").hide();
  }

  if(sendFlag==false){
  return false;
}
});

});
}
}
else{
　　//jQueryの処理
//HOME
$("header button").show();
$("header button").click(function(){
  $("nav ul").stop().slideToggle(200);
   $("form .button").css("left",$(window).width()/2-$("form .button").width()/2);
});


// contact
$(".alert").hide();
$(".button").click(function(){
  var sendFlag=true;
  if(!$(".name").val()){
    $(".form-text .alert").show();

    sendFlag=false;
  }
  else{
      $(".form-text .alert").hide();
  }
  if(!$("#email").val()){
    $(".form-mail .alert").show();
    sendFlag=false;
  }
  else{
      $(".form-mail .alert").hide();
  }

  if(!$("#message").val()){
    $(".form-message .alert").show();
    sendFlag=false;
  }
  else{
      $(".form-message .alert").hide();
  }

  if(sendFlag==false){
  return false;
}
});

});


}
}
mediaQuery.addListener(handleTableChange)
handleTableChange(mediaQuery)

Comments

[kei344]

「jQueryの処理」を提示しましょう。

[hope_mucci]

アニメーションはどのように実装していますか？
jqueryで実装しているのであればjqueryのコードを、cssで実装しているのであればcssのコードも質問文内に記載しましょう。
現象を再現できるコードを書いてくれないと回答も難しいです。
どんなアニメーションをやろうとしているかにも依りますので。

[ryoma26]

JQueryの詳細を記載しました。ご検討のほど宜しくお願い致します。
if(e.match)の方のJQueryの処理がelseの方でも反映されてしまいます。

[hope_mucci]

とりえあずsyntax errorの嵐なので最低限文法エラーのないコードにしてください。
ステートメントの区切りがおかしい箇所が沢山あるし、{}の対応も合致していません。

あと、これはさすがにHTMLもないと再現不可能です。
現象が再現できるミニマムなコードをお願いします。
もしくはcodepen等デモンストレーションができるサイトを利用するのも良いでしょう。