jQuery fadeOut和fadeIn

我有麻煩使用jQuery fadeOut（）圖像和fadeIn（）另一個單擊按鈕時。jQuery fadeOut和fadeIn

爲了簡單起見，這裏是需要受到影響的只是部分的HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel='stylesheet' href='style.css'/> 
     <script type='text/javascript' src='script.js'></script> 
    </head> 
    <body> 
     <div id="landing-page"> 
      <div id="call-to-action"> 
       <img src="https://scontent-b-lga.xx.fbcdn.net/hphotos-prn1/v/1608452_3821343707689_2110853534_n.jpg?oh=ab5ebfd5dce574e97a43e9a7c0739583&oe=52D0F2AC" id="learn-button"/> 
      </div> 
      <img src="https://scontent-b-lga.xx.fbcdn.net/hphotos-prn1/v/1551908_3821359708089_1101636385_o.jpg?oh=aa19a9ac5f5b5e4f3cf704858482803d&oe=52D11726"id="line"/> 
     </div> 
    </div> 
</body>

這裏是jQuery的：

$(document).ready(function() { 
    $("#call-to-action").click(function() { 
     $("#landing-page").fadeOut("slow"); 
     $("#more-info").fadeIn("slow"); 
    }); 
});

當按鈕＃呼叫TO-點擊操作，＃登陸頁面div應該fadeOut，＃more-info圖片應該淡入。它不工作。實際上，我輸入的任何jQuery命令都不適用於其他div。我相信我的jQuery插件有問題，或者我錯過了一些對jQuery表單的引用。

來源

2014-01-11 Dylan Husted

我看不到任何具有'more-info'標識的標籤。無論如何，如果沒有任何工作，你檢查瀏覽器的控制檯是否有錯誤？ – patryk

你說得對。我忘了在發佈中包含＃more-info圖片，但它在我的實際html文檔中正確。如何檢查瀏覽器控制檯是否有錯誤？ –

你可以檢查錯誤使用FireBug – Moussawi7

「或者我錯過了一些jQuery表的參考。」

是的。您顯示的代碼不包含jquery.js文件。如果您的項目具有的jquery.js的副本，然後在<head>部分立即前添加這是你的其他JS包括：

<script type='text/javascript' src='jquery.js'></script>

否則，您可以從CDN引用一個副本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>

（根據你選擇的CDN支持哪個版本指定jquery的版本;我建議最新版本與舊IE兼容。）

另外你可能想隱藏t他第二次的img一起開始，直到第一個IMG已完成褪色不褪色它 - 如果你通過一個函數作爲第二個參數.fadeOut()它將淡出完成後調用：

$(document).ready(function() { $("#more-info").hide(); $("#call-to-action").click(function() { $("#landing-page").fadeOut("slow", function(){ $("#more-info").fadeIn("slow"); }); }); });

演示：http://jsbin.com/OmaCOju/1/edit

來源

2014-01-11 22:52:44 nnnnnn

是否有一個原因，我錯過了爲什麼這個答案表明jQuery的舊版本？ –

@MartinAndersson - 版本1.10.2不是「年代久遠」，它是與舊IE兼容的jQuery的最新版本（除非你計算1.11，它仍然是測試版）。 v1.10.2與v2.0.3同時發佈... – nnnnnn

哦，我的不好。我一直在閱讀「1.1」版本。我很高興jQuery終於放棄了對.. AGE OLD IE：s =）的支持。 –

你錯過了包括jQuery庫。你可以從谷歌CDN中包含它。從你的問題我明白，點擊一個按鈕，你想讓div淡入和淡出。請參考下面的演示來做這件事。

演示：http://jsbin.com/IGAJeqew/2/edit

來源

2014-01-12 00:06:15

jQuery fadeOut和fadeIn

回答

相關問題