Jquery .animate不會工作

不知道爲什麼，但我拼命試圖讓我在jsfiddle上找到的這個jquery淡入淡出的例子來與我的網站一起工作......但是我無法讓我的網站工作......在我的頁面的頭部我鏈接到http://code.jquery.com/jquery-1.10.1.min.js之後，我鏈接到文件我有我的js代碼（小塊）。這裏是鏈接的的jsfiddle http://jsfiddle.net/a9dnW/417/Jquery .animate不會工作

jQuery的

$("#test p").delay(1000).animate({"opacity": "1"}, 700); 
$("#test2 p").delay(3000).animate({"opacity": "1"}, 700);

CSS

#test p { 
opacity: 0; 
margin-top: 25px; 
font-size: 21px; 
text-align: center; 
} 
#test2 p { 

opacity: 0; 
margin-top: 25px; 
font-size: 21px; 
text-align: center; 
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>test</title> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script src="../js/smallblocks.js" type="text/javascript"></script> 
<link type="text/css" rel="stylesheet" href="../css/kqsolo.css"/> 
</head> 
<body> 
<div id="test"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div> 
<div id="test2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div> 
</body> 
</html>

來源

2013-06-24 Alex Epp

嘗試淡入（）和顯示：無;最初在您的項目

http://jsfiddle.net/blackjim/a9dnW/419/

setTimeout(function(){ 
    $("#test p").fadeIn(700); 
},1000); 

setTimeout(function(){ 
    $("#test2 p").fadeIn(700); 
},3000);

來源

2013-06-24 07:18:24 AntouanK

後的負荷量剛開始的腳本：

$(document).ready(function() { 

$("#test p").delay(1000).animate({"opacity": "1"}, 700); 
$("#test2 p").delay(3000).animate({"opacity": "1"}, 700); 

});

我測試，它工作正常。如果沒有，則可能會在smallblocks.js內發生錯誤。嘗試刪除它，看看測試它是否改變的東西

好了，你的全碼：

<script src="http://code.jquery.com/jquery-1.10.1.js"></script> 

<style> 
    #test p { 
    opacity: 0; 
    margin-top: 25px; 
    font-size: 21px; 
    text-align: center; 
    } 
    #test2 p { 

    opacity: 0; 
    margin-top: 25px; 
    font-size: 21px; 
    text-align: center; 
    } 
</style> 

<div id="test"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div> 
<div id="test2"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div> 


<script> 
$(document).ready(function() { 
    $("#test p").delay(1000).animate({"opacity": "1"}, 700); 
    $("#test2 p").delay(3000).animate({"opacity": "1"}, 700); 
}); 
</script>

來源

2013-06-24 07:21:21

它已經運行由的jsfiddle – AntouanK

但你的頁面上onload，即你需要寫它。製作一個隨機的html頁面並嘗試一下。當然它是在jsFiddle上工作，但是如果你想在你自己的頁面上嘗試，你需要編寫完整的代碼 –

是的，我同意。但他提供了一個jsFiddle，所以我猜他知道如何在自己的頁面中實現。 – AntouanK

Jquery .animate不會工作

回答

相關問題