Question

尝试复制一个漂亮的popover我在网上穿过。

我似乎无法让我的jQuery工作。感觉我忽略了一些明显的东西。（但是我包括它，是的，我在我的资源面板中双重检查了铬）

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

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

Answer 2

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

jQuery不适用于popover

2 个答案: