Question

我的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/

Answer 1

啊，好吧。我知道发生了什么。

您的.send_email div的默认样式是可见的。因此slideDown电话无效，第一次被称为。

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

＆＃13;

    $(".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');
      });
    });

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Updated Example

.send_email {
    display: none;
}

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

Fadein回调不起作用

2 个答案: