Question

我在JavaScript中创建了一个show并隐藏了div，但代码很快就被显示和隐藏了。我不知道我的代码是否错误。

 <script type='text/javascript'>
   function sendpost(){
   var u = $('#myform').serialize();
 $.post('post.php',u,function(outpot){
      $('#alert').html(outpot).show().fadeOut(4000);
      $('#myform').fadeOut(1000).delay(2000).fadeIn(2000);
   });
   }
   </script>

HTML

 <div class="formone">
        <div id="alert"></div>

<form id="myform">
        Past your link here and Click "Short Now"
       <input type='text' id='mytext'  name='link' size='70' />
       <input type='submit' onclick="sendpost();" value="Short Now" />
</form>
   </div>

Answer 1

$('#myform').submit(function(e){
   // this will prevent the form from being sent - reloading the page
   e.preventDefault();
   var u = $(this).serialize();
   $.post('post.php',u,function(outpot){
       $('#alert').html(outpot).show().fadeOut(4000);
       $('#myform').fadeOut(1000).delay(2000).fadeIn(2000);
   });
});

HTML：

<form id="myform">
    <!-- ... -->
    <input type='submit' value="Short Now" />
</form>

Answer 2

尝试使用css3过渡也是性能更好！ ;-)

var dom = {
  $input: $('.input'),
  $alertContainer: $('.alert')
};

dom.$input.on('click', function() {
  /* $.post('post.php',u,function(outpot){
   * ...
   * your magic
   */
  dom.$alertContainer.addClass('show');
});

.alert {
  opacity: 0;
  width: 200px;
  height: 0;
  -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  -o-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;
}
.show {
  opacity: 1;
  height: 100px;
  background: #99cc00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formone">
  <div class="alert">Lorem ipsum tu lis ma nore, Lorem ipsum a lot of lorem isum</div>
  <form id="myform">
    Past your link here and Click "Short Now"
    <input type='text' id='mytext' name='link' size='70' />
    <input type='submit' class="input" value="Short Now" />
  </form>
</div>

在javascript中显示div

2 个答案: