帶jQuery的Textillate無法正常工作。 Uncaught TypeError：$未定義

好吧，我覺得我已經嘗試了一切。我知道還有很多類似的問題，但我對Javascript並不是很熟悉，所以我讀過的其他答案就超出了我的頭。我越來越：

試圖運行 Textillate腳本的時候

Uncaught ReferenceError: $ is not defined：

<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

    <?php include('head.php'); ?> 


<!-- Bootstrap --> 
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet"> 
<link href="css/custom.css?version=1.4" type="text/css" rel="stylesheet"> 
<link href="css/animate.css" type="text/css" rel="stylesheet"> 


<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
<!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js" async></script> 
<script type="text/javascript" src="js/bootstrap.min.js" async></script> 
<script type="text/javascript" src="js/jquery.lettering.js" async></script> 
<script type="text/javascript" src="js/jquery.textillate.js" async></script> 

<script> 
$(function() { 
      $('.txt').textillate({ 
    in: { effect: 'rollIn' }, 
    out: { effect: 'foldUnfold', sync: true }, 
    loop: true 

     }); 
</script>

我已經裝在了jQuery，animate.css，textillate.js和lettering.js最新版本在<head>按照文檔的指示。

我的HTML是這樣的：

<h1 class="txt" data-in-effect="rollIn">text</h1>

有人能告訴什麼是錯在最簡單的術語，以及如何解決這個問題？

這可能是明顯的，我失蹤，但就像我說我是一個noob。現場演示可以在這裏找到：www.thekdesignco.com/new/

來源

2014-11-22 Kristin P

這通常發生在未包含jQuery或未在指定位置找到jQuery的情況。你知道你是否包含jQuery？ – dops 2014-11-22 17:36:55

您是否在問題中顯示的腳本之前鏈接了'jquery'？ – 2014-11-22 17:37:04

你可以編輯帖子，並告訴我們你的整個''？ – dops 2014-11-22 17:39:56

第一個問題是：async-屬性在sript-tags中。使用async，HTML分析器不會等待腳本加載完成。所以DOM先準備好，$(function() {})在jQuery出現之前執行。

第二個問題：上一個腳本中的功能未正確關閉。它看起來像：

$(function() { 
    $('.txt').textillate({ 
     in: { effect: 'rollIn' }, 
     out: { effect: 'foldUnfold', sync: true }, 
     loop: true 
    }); 
});

請立即修復它。

第三個問題：某處是<太多或在錯誤的地方。這似乎是jquery.textillate.js-文件中的問題。當我找到它時，我會更新這個答案。

編輯：在js/jquery.textillate.js文件未jquery.textillate.js，但是一些未知的HTML文件。清理你的js-folder。

來源

2014-11-22 19:01:59

DOH！善良，感謝您的耐心！我不知道錯誤的文件如何進入... – 2014-11-22 19:30:16

@KristinP很高興我能幫到你。下次使用您的控制檯（F12）。那裏的錯誤消息將引導您找到出錯的腳本和行。 – 2014-11-22 19:49:50

使用jquery.noconflict（）;

將解決該問題。

來源

2014-11-22 17:49:29 asimshahiddIT

我不知道如何整合這個。你可以再詳細一點嗎？對不起，我不熟練使用Javascript。 – 2014-11-22 17:56:06

帶jQuery的Textillate無法正常工作。 Uncaught TypeError：$未定義

回答

相關問題