jQuery不适用于弹出窗口

Question

试图复制一个很好看的popover我穿过网上。

我似乎无法让我的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

对于淡入工作，该元素应该被隐藏，也为左，右工作，你需要设置从那里动画应该开始适当的初始值

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

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新问题

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相关问题

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.