Fadein 回调不起作用答案

【问题标题】：Fadein callback not workingFadein 回调不起作用
【发布时间】：2015-01-31 02:00:21
【问题描述】：

我的fadeIn 和slideDown 只是有一些小的回调问题。回调对于fadeIn 和slideDown 不能正常工作。

这里不贴很多代码，我只贴 jQuery 代码和 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/

【问题讨论】：

它工作正常。什么不起作用？
我刚刚解释过，fadeIn 应该首先工作，然后 div 向下滑动，而不是在我触发点击后立即显示。 @LuísSoares
这不是我所看到的。我看到小提琴按预期工作。您是否尝试过将动画速度设置为较慢？
这是常规行为。你期待什么？
第一次触发点击，点击 X 按钮并再次触发点击后回调不起作用，然后动画似乎工作正常。 @rossipedia

标签： jquery fadein

【解决方案1】：

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

Updated Example

.send_email {
    display: none;
}

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

【讨论】：

【解决方案2】：

嗯嗯好的。我明白发生了什么。

.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>

【讨论】：