使用jquery插件的Web動畫：哇slideInUp不起作用

-2

我想使用wow.js插件來動畫我的網頁，但不幸的是，我想要使用的唯一動畫似乎不適用於我的情況。當我嘗試slideInDown，slideInLeft和其他人這工作正常。我使用Bootstrap來進行響應式網頁設計。使用jquery插件的Web動畫：哇slideInUp不起作用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
<meta charset="utf-8"/> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1, user-scalable=no"/> 
 
    <title>Bootstrap 101 Template</title> 
 

 
    <!-- Bootstrap --> 
 
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>> 
 
    <link rel="stylesheet" href="bootstrap/css/animate.css"> 
 
    <link rel="stylesheet" href="bootstrap/css/site.css"> 
 
    </head> 
 
    <body> 
 
<div class="organic container"> 
 
     <div class="row"> 
 
     <div class="col-xs-7 col-xs-offset-4 col-sm-7 col-sm-offset-4 col-md-7 col-md-offset-4 col-lg-7 col-lg-offset-4"><img src="elem/photo-1-idea.jpg" alt="organic infusions"/></div> 
 
     <h2 class="col-xs-2 col-xs-offset-2 col-sm-2 col-sm-offset-2 col-md-2 col-md-offset-2 col-lg-2 col-lg-offset-2 wow slideInUp" data-wow-offset="10" data-wow-duration="5s"> ORGANIC</h2> 
 
     <p class="col-xs-5 col-xs-offset-2 col-sm-5 col-sm-offset-2 col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2 wow slideInUp" data-wow-offset="10" data-wow-duration="5s" data-wow-iteration="20"> Nos infusions en tige offrent une nouvelle façon de consommer les plantes issues de terroirs exceptionnels.</p> 
 
     </div> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="bootstrap/js/bootstrap.min.js"></script> 
 
    <script src="bootstrap/js/wow.min.js"></script> 
 
    <script> 
 
     wow = new WOW(
 
     { 
 
      animateClass: 'animated', 
 
      offset:  100, 
 
      callback:  function(box) { 
 
      console.log("WOW: animating <" + box.tagName.toLowerCase() + ">") 
 
      } 
 
     } 
 
    ); 
 
     wow.init(); 
 
    </script> 
 
    </body> 
 
</html>

來源

2016-06-21 Yanis Ismail

檢查您是否正確完成了鏈接部分。我不確定，但我認爲這個錯誤是因爲你沒有正確地引用。檢查並看看 – Bhugy

哦，好吧，好點！但你能否確切地說明我可能錯過的參考？導致一切看起來不錯.. –

你能顯示你的文件夾結構嗎？這可能有幫助。 – Bhugy

的「github.com/matthieua/WOW」參考「github.com/daneden/animate.css」的animate.css的animate.css。

在WOW中，我找不到animate.css中的slideUp的定義。

但是，我可以在daneden/animate.css找到slideUp的定義。

WOW的animate.css不是最新版本。

您可以用更新替換舊的animate.css以使其正常工作。

來源

2016-06-21 08:06:26 langyu

是的，反彈在運作良好！但不是真正的渲染，我必須做..我需要做一個小小的slideUp，謹慎的，大約20px –

我建議你使用'https：//github.com/daneden/ animate.css'，這可以很好地滿足你的需求答案已經更新。 – langyu

但是，如果我是對的，我確信Wow.js已經使用animate.css所以..這就是我已經做的 –

我將css更改爲animate.css的最新版本，但仍然無法工作，我不知道爲什麼，但是如果我將css的「slideInUp」類重命名爲另一個像slideUpIn，它適用於我！

希望它有幫助！

來源

2017-03-03 15:10:48 Puchi

使用jquery插件的Web動畫：哇slideInUp不起作用

回答

相關問題