Question

我目前正在使用横幅广告和jquery slidedown功能。

我希望的目标是在几秒钟之后让横幅向下滑动并覆盖我页面的标题，直到用户完成表单（或点击＆＃34; x＆＃34;，我没有＆＃ 39; t place yet。

我在jsfiddle环境中工作得很好，但对于我的生活，我无法弄清楚为什么它不会滑落＆＃34;在我的现场环境中。

这是我的jsfiddle：http://jsfiddle.net/tXumG/13/。

以下是我的实际网页上的横幅：http://online.saintleo.edu/the-saint-leo-experience/faculty-spotlights.aspx

任何帮助都会非常感激。非常感谢你。

HTML:

<div class="hidden">
    <body>
  <div id="blog-subscribe-outer-container">
    <div id="blog-subscribe-overlay">
        <div id="blog-subscribe-left"><img src="http://online.saintleo.edu/media/150491/blog-logo-

icon.png" /></div>
        <div id="blog-subscribe-center"><span style="color: #FF0000; font-family: arial; font-size: 

35px">Subscribe Now!</span></div>
        <div id="blog-subscribe-right">
            <script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script>
<script>
  hbspt.forms.create({ 
    portalId: '206683',
    formId: '3c8d4d75-6e0e-4d1a-a39d-c2728223e2d9'
  });
</script>
        </div>
    </div>
    <div id="blog-subscribe-base">
    </div>
  </div>
</body>
</div>

----------------------------

JS:

jQuery(function($) {
    $('.hidden').delay(4000).slideDown("slow");
});

-----------------------------

CSS:

.hidden {
    display: none
}
#blog-subscribe-outer-container {
    width: 100%;
    position: relative;
}

#blog-subscribe-overlay {
    background-color: orange;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 1;
}

#blog-subscribe-base {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #275d39;
}

#blog-subscribe-left {
    float:left;
}

#blog-subscribe-center {
    display: inline-block;
    margin:0 auto;
    padding-top: 45px;
}

#blog-subscribe-right {
    float:right;
    width: 33%;
    padding-top: 10px;
}

#blog-subscribe-inner-container {
    width:100%;
    text-align:center;
}

Answer 1

我建议使用Css Transitions

然后使用jquery将类添加到元素：

$(document).ready(function() {
    $('.blog-subscribe-hidden').addClass('animated');
});

工作小提琴：http://jsfiddle.net/tXumG/14/

带有＆＃39;横幅广告的横幅广告功能在我的jsfiddle工作但不是真实的环境

1 个答案: