jQuery не работает для popover

Question

Пытается реплицировать симпатичный поппер, который я пересек онлайн.

Я не могу заставить работать jQuery. У меня такое чувство, что я пропускаю что-то очевидное. (Но да, я включил его, и да, я проверил в моей панели ресурсов в хроме)

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 работать, элемент должен быть скрыт, также слева и справа на работу вам необходимо установить соответствующие начальные значения, откуда анимация должна начинаться

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

Ваш jQuery выглядит немного.

Кроме того, вы должны попробовать вызвать функцию после завершения загрузки документа.

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