需要帮助停止提交联系表单后发生的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");
});