jQuery not working for popover

Question

Trying to replicate a nice looking popover I crossed online.

I can't seem to get my jQuery to work. Got the feeling I'm overlooking something obvious. (But yes I included it, and yes I double checked in my resources panel in 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

For fadeIn to work, the element should be hidden, also for left and right to work you need to set proper initial values from where the animation should start

$('.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>

Answer 2

your jQuery looks a bit off.

As well, you should try calling the function after the document has finished loading.

<script>
    $(document).ready(function(e){
        $('.scpo_overlay').delay(500).fadeIn(400);
        $('.scpo_slidein').delay(700).animate({left:0});
        $('.scpo_box').delay(700).animate({right:0});
    });
</script>