淡入淡出回调不起作用

Question

我的 fadeIn 和 slideDown 只是遇到了一些小的回调问题。 fadeIn 和 slideDown 的回调无法正常工作。

这里没有 post 很多代码，我只是 post jQuery 代码和 link 到 jsFiddle。

$(".send_email_button").click(function(){
    $(".fullscreen").fadeIn(function() {
        $(".send_email").slideDown();
    });
});

$(".email_close").click(function(){
    $(".send_email").slideUp(function() {
        $(".fullscreen").fadeOut();
    });
});

http://jsfiddle.net/7zq716bf/

Answer 1

啊啊啊好的。我明白发生了什么事。

您的 .send_email div 的默认样式是可见的。所以slideDown调用实际上是无用的，第一次调用。

将 style="display:none;" 添加到 .send_email div（或将 .send_email { display: none; } 添加到 css），您应该会看到所需的行为。

    $(".send_email_button").click(function() {
      $(".fullscreen").fadeIn('slow', function() {
        $(".send_email").slideDown('slow');
      });
    });

    $(".email_close").click(function() {
      $(".send_email").slideUp('slow', function() {
        $(".fullscreen").fadeOut('slow');
      });
    });

 .edit_users {
   background-color: #ffffff;
   width: 330px;
   height: auto;
   padding: 10px;
   border: 1px solid #ECECEC;
 }
 .send_email {
   margin: 85px 0 0 50px;
 }
 .email_close {
   background-image: url("http://i.epvpimg.com/5oVbc.png");
   background-repeat: repeat;
   width: 15px;
   height: 17px;
   font-size: 11pt;
   font-weight: 600;
   cursor: pointer;
   opacity: 0.3;
 }
 #content .email_close:hover {
   opacity: 0.6;
 }
 .fullscreen {
   background-image: url("http://i.epvpimg.com/VLXQe.png");
   background-repeat: repeat;
   width: 100%;
   height: 100%;
   padding: 0;
   margin: -30px;
   position: fixed;
   z-index: 2;
   display: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" class="send_email_button" value="Send email" />
<div class="fullscreen">
  <div class="send_email edit_users" style="display:none;">
    <form method="post" action="">
      <div class="email_close right"></div>
      <h2>Send email to User</h2>
      <input type="text" name="email_subject" required placeholder="Subject" autocomplete="off" style="width: 300px;" />
      <input type="email" name="email_address" id="email" disabled placeholder="<?php echo $result['user_email']; ?>" autocomplete="off" style="width: 300px;" />
      <textarea name="email_message" required rows="7" cols="40" style="width: 300px;"></textarea>
      <center>
        <input type="submit" name="email_submit" value="Send" />
      </center>
    </form>
  </div>
</div>

Answer 2

它第一次没有按预期工作的原因是 .send_email 最初没有隐藏。最初在其上设置display: none，然后在第一个.fadeIn()方法结束时调用.slideDown()方法。

Updated Example

.send_email {
    display: none;
}

在此之前，初始 .slideDown() 事件的持续时间是 0，因为 .send_email 元素已经可见。

淡入淡出回调不起作用

Fadein callback not working

jquery

fadein