问题描述:

I'm just having some minor callback issues with my fadeIn and slideDown.

The callback isn't working properly for the fadeIn and then slideDown.

Instead of post a lot of code here, I'll just post the jQuery code and a link to 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/

网友答案:

The reason it wasn't working as expected the first time, was because the .send_email wasn't initially hidden. Set display: none on it initially, and then the .slideDown() method will be called when the first .fadeIn() method ends.

Updated Example

.send_email {
    display: none;
}

Prior to this, the duration of the initial .slideDown() event was 0 because the .send_email element was already visible.

网友答案:

Ahhhhh ok. I see what's happening.

The default style of your .send_email div is visible. So the slideDown call is effectively useless, for the first time it's called.

Add style="display:none;" to the .send_email div (or add .send_email { display: none; } to your css) and you should see the behavior you want.

    $(".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>
相关阅读:
Top