Question

我正在使用wow js和animated.css它很棒我非常喜欢当我尝试在用户滚动500px时运行效果时遇到一个小问题。

我可以看到jquery正在插入类来运行效果，但我看不到效果，如果我的jquery很难看，请随意解决。

我在我的页面上插入了wow和animated.css类手册并且工作得非常好，当我尝试使用jquery有代码时，就会发生这个错误。

之前的

html：

 <footer>
 </footer>

运行效果后

html：

<footer class="wow shake" style="visibility: visible; animation-name: shake;">

JS：

var fixed = false;    
$(document).scroll(function() {
    if( $(this).scrollTop() >= 500 ) {
        if( !fixed ) {
            fixed = true;
            // $('footer').css({position:'fixed',top:20});
            $('footer').addClass('wow shake').css({visibility: 'visible', 'animation-name': 'shake'});

            // .one('animationend webkitAnimationEnd  mozanimationend MSanimationend oAnimationEnd');
        }
    } else {
        if( fixed ) {
            fixed = false;
            $('footer').removeClass('wow shake');
        }
    }
});

Answer 1

您的代码足够接近，检查了行为，并发现您应该添加一个额外的课程animated。

但是，您想要做的事情似乎不需要wow.js来实现，只需使用

$(target).addClass('animated shake').show();

用动画显示，然后使用

$(target).hide();

隐藏它应该就够了，在代码片段中添加了一个示例。

如果我误解了你想要达到的目标，请指出我。

new WOW().init();
var fixed = false;
// These are the classes when the animation is processing.
var animateGroup = 'wow shake animated';
$(document).scroll(function() {
    if( $(this).scrollTop() >= 500 ) {
        if( !fixed ) {
            fixed = true;
            // Make them show.
            $('footer')
                .addClass(animateGroup)
                .css({visibility: 'visible', 'animation-name': 'shake'}); 
          
            // Demo without wow.js
            $('.noWow').addClass('animated shake').show();
        }
    } else {
        if( fixed ) {
            fixed = false;
            // Remove anything we just added.
            $('footer')
                .removeClass(animateGroup)
                .removeAttr('style');
                // Or if you have other styles, use below to remove specific style instead.
                //.css({visibility: '', 'animation-name': ''});
          
          // Demo without wow.js
          $('.noWow').hide();
        }
    }
});

body {
    width: 100%;
    height: 2000px;
    background-color: gray;
}

footer {
    visibility: hidden;
    position: fixed;
    top: 20px;
    width: 50px;
    height: 20px;
    background-color: cyan;
}

.noWow {
    display: none;
    position: fixed;
    top: 20px;
    left: 100px;
    width: 50px;
    height: 20px;
    background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">

<footer>
 </footer>
<div class="noWow">
 </div>

Answer 2

而不是这个，你必须使用滚动的继续动画...我认为这更好，当你用它们在他们的位置滚动动画也将工作正常...像这样.....你也可以在Codepen

中查看我的示例

＆＃13;

 // Repeat demo content
  var $body = $('body');
  var $box = $('.box');
  for (var i = 0; i < 20; i++) {
    $box.clone().appendTo($body);
  }

  // Helper function for add element box list in WOW
  WOW.prototype.addBox = function(element) {
    this.boxes.push(element);
  };

  // Init WOW.js and get instance
  var wow = new WOW();
  wow.init();

  // Attach scrollSpy to .wow elements for detect view exit events,
  // then reset elements and add again for animation
  $('.wow').on('scrollSpy:exit', function() {
    $(this).css({
      'visibility': 'hidden',
      'animation-name': 'none'
    }).removeClass('animated');
    wow.addBox(this);
  }).scrollSpy();

＆＃13;

body{
overflow-x:hidden;
}
.box {
  display: block;
  width: 200px;
  background: rgba(255, 255, 255, 0.7);
  color: #eb3980;
  font-family: "Comic Sans MS", "Comic Sans";
  border: 3px dashed pink;
  margin: 30px auto;
  text-align: center;
}

.doge {
  display: block;
  width: 200px;
  height: 200px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: url(http://mynameismatthieu.com/WOW/img/wow-8.gif) no-repeat;
}

body {
  background: url(http://mynameismatthieu.com/WOW/img/wow-logo.jpg) #fff fixed no-repeat center center;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script src="https://gitcdn.xyz/repo/thesmart/jquery-scrollspy/0.1.3/scrollspy.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<body>
<div class="box">
  <h1 class="wow slideInLeft">Hello</h1>
  <h1 class="wow slideInRight">World</h1>
  <h2>  </h2>
</div>
<div class="doge wow bounceIn"></div>
</body>

＆＃13;

哇js没有使用滚动

2 个答案: