コンタクトフォームを送信した後にJavaScriptのフェードイン効果が発生するのを防ぐのに役立つ

Question

私はここに投稿するのがかなり新しいです。私は最初にウェブサイトに入ったときに画面をフェードインさせるためのjavascriptエフェクトを持っていますが、フォームの送信後に画面が表示されるのを防ぐことはできません。これを達成するための簡単な方法はありますか？

HTML

<form method="post" action="#contact"> 
    <input type="hidden" name="hidden" id="hidden" value="Message sent from Jay Gervais Design"/> 

<div id="comment"> 
<input type="text" name="firstname" id="firstname" placeholder="First Name"><label for="firstname"></label><br /> 

<input type="text" name="lastname" id="lastname" placeholder="Last Name"><label for="lastname"></label><br /> 

<input type="text" name="email" id="email" required="required" Placeholder="E-Mail Address"><label for="email"></label><br /> 

<textarea rows="10" cols="30" name="comments" id="comments" Placeholder="Write me a comment"></textarea><label for="comments"></label><br /> 

<input type="submit" name="submit" id="submit" value="Submit" /> 

</div> 

CSS

body { 
    padding-top: 50px; 
    font-family: 'Josefin Sans', sans-serif; 
    opacity: 1; 
    transition: 5s opacity; 
} 
    body.fade-out { 
    opacity: 0; 
    transition: none; 
} 

JS

送信ボタンのデフォルト動作では、アニメーションのように再び起こることになりますページを（リロードすることです

$(function() { 
     $('a[href*="#"]:not([href="#"])').click(function() { 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
      $('html, body').animate({ 
       scrollTop: target.offset().top 
      }, 1000); 
      return false; 
      } 
     } 
     }); 
    }); 

/* Fade in */ 
    document.body.className += 'fade-out'; 
    $(function() { 
     $('body').removeClass('fade-out'); 
    }) 

Answer 1

よく）。

$("form").submit(function(event){ 
    event.preventDefault(); 
    } 

Answer 2

これをコードに追加すると、これを回避できます。送信ボタンをクリックすると遷移効果が発生しないようにする必要があります。

$("input[type='submit']").click(function(event){ 
    $('body').css("transition", "none"); 
});