javascript - jQuery 不适用于弹出窗口

Question

尝试复制我在网上看到的漂亮的弹出窗口。

我似乎无法让我的 jQuery 工作。我感觉我忽略了一些显而易见的事情。 (但是，是的，我包含了它，是的，我在 Chrome 的资源面板中仔细检查了)

JSfiddle:http://jsfiddle.net/3jsrk8n8/

HTML:

<div class="scpo_overlay"></div>
<div class="scpo_slidein"></div>
<div class="scpo_box">
    <p id="scpo_title">You should really get this</p>
    <p id="scpo_motivation">Because reasons. Undeniably good reasons</p>
    <form action="https://www.skillcollector.com/sendy/subscribe" method="POST" accept-charset="utf-8" _lpchecked="1">
        <input type="text" name="email" placeholder="Email">
        <input type="hidden" name="list" value="lupC23UqZGvSWXHlVakRmQ" style="display:none">
        <input type="submit" value="Send me the eBook!" name="Get the stuff!" onclick="ga('send', 'event', { eventCategory: 'Benefits', eventAction: 'Signup', eventLabel: 'Headerwell'});">
    </form>
</div>

CSS:

        .scpo_overlay {
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(0,0,0,0.5);
            height: 100%;
            width: 100%;
            z-index: 10;
        }
        .scpo_slidein {
            position: fixed;
            top: 0;
            left: 0;
            background-color: red;
            width: 55%;
            height: 100%;
            z-index: 11;
        }
        .scpo_box {
            position: fixed;
            right: 0;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            text-align: center;
            width: 100%;
            z-index: 12;
        }
        .scpo_box #scpo_motivation, .scpo_box form {
            display: inline-block;
            padding: 0 5px;
        }

JavaScript:

    $(function(){
        $('.scpo_overlay').delay(500).fadeIn(400);
        $('.scpo_slidein').delay(700).animate({left:0});
        $('.scpo_box').delay(700).animate({right:0});
    });

Answer 1

为了让 fadeIn 工作，元素应该被隐藏，同样为了让 left 和 right 工作，你需要从动画开始的地方设置正确的初始值

$('.scpo_overlay').delay(500).fadeIn(400);
$('.scpo_slidein').delay(700).animate({
  left: 0
});
$('.scpo_box').delay(700).animate({
  right: 0
});

.scpo_overlay {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  z-index: 10;
  display: none;
}
.scpo_slidein {
  position: fixed;
  top: 0;
  left: -55%;
  background-color: red;
  width: 55%;
  height: 100%;
  z-index: 11;
}
.scpo_box {
  position: fixed;
  right: -100%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
  z-index: 12;
}
.scpo_box #scpo_motivation,
.scpo_box form {
  display: inline-block;
  padding: 0 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scpo_overlay"></div>
<div class="scpo_slidein"></div>
<div class="scpo_box">
  <p id="scpo_title">You should really get this</p>
  <p id="scpo_motivation">Because reasons. Undeniably good reasons</p>
  <form action="" method="POST" accept-charset="utf-8" _lpchecked="1">
    <input type="text" name="email" placeholder="Email">
    <input type="hidden" name="list" value="" style="display:none">
    <input type="submit" value="Send" name="Get the stuff!">
  </form>
</div>