2

不知道为什么，但我拼命试图让我在 jsfiddle 上找到的这个 jquery 淡入淡出的例子与我的网站一起工作......但是我无法让我的网站工作......在我链接的页面头部到http://code.jquery.com/jquery-1.10.1.min.js然后我链接到文件我有我的 js 代码（小块）。这是 jsFiddle http://jsfiddle.net/a9dnW/417/的链接

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>
4

2 回答 2

2

加载内容后启动脚本：

$(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-24T07:21:21.990 回答
1

尝试 fadeIn() 并显示：无；最初在您的物品上

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

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

setTimeout(function(){
    $("#test2 p").fadeIn(700);
},3000);
于 2013-06-24T07:18:24.460 回答