Question

目标：在滚动时，我需要Jquery使用Animate.css将一类动画slideInUp添加到页面底部的表单中。如果你看看Css，我试图在屏幕上隐藏图标，然后我就会想到，一旦jquery被踢进去，它就会显露出来。我使用Bootstrap 3工作了一次，现在我正在使用Just Bootrap 3 Grid，它不再工作了（可能不相关）......就像它昨天的工作一样。它def添加了类“动画slideInUp”，但没有滑动，它只是出现。

HTML：

div class="row">
<div class="container" id="load-form">
<div class="col-xs-12 col-sm-6">
//Bunch of icons//
</div>

<div class="col-xs-12 col-sm-6">
        <h5>Sign up for our monthly newsletter!</h5>
                <span id="form"><?php echo do_shortcode('[contact-form-7 id="208" title="Email NewsLetter"]'); ?></span>
        </div>

    </div>
    </div>

CSS：

.wpcf7-form { //this is the class gets auto outputted by the plugin.
  visibility: hidden;
  padding-top: 60px;  //trying to give it a padding top so element has room to "slide up"
}
.animated { // this is the class that is animated.css
    visibility: visible !important;
}

Jquery的：

jQuery(document).ready(function($) {//Must add no-conflict cause Wordpress
var locateForm = $('#load-form');
  var formLocateOrigOffsetY = locateForm.offset().top;

  function scrollForm() {
   if ($(document).scrollTop() >= formLocateOrigOffsetY) {
            setTimeout(function() {
            $('.wpcf7-form').addClass('animated slideInUp');
        }, 500);
          }
       }

 $(document).on('scroll', scrollForm);

});//End No conflict

侧注：动画不再隐藏，然后像以前一样向上滑动。我有正确的方式链接jquery ...对于那些熟悉WordPress的人：

function theme_js() {
      //Other things that I have enqueued//

    wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js');
add_action( 'wp_enqueue_scripts', 'theme_js' );

**对于那些会对此说些什么的人来说，这不是WordPress部分，frig off，我只是想提供尽可能多的信息。

谢谢： - ）

Animation.css没有动画。而只是添加一个类

0 个答案: