3

我觉得自己像个彻头彻尾的白痴，我相信我只是迟到了……但我无法让它发挥作用。在 jsFiddle 上它工作得很好，但是当我把它放在我的 html 文档上时它没有。请帮忙！我不知道错误在哪里。这是我的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>Untitled Document</title>
<link rel="stylesheet" href="test-isla.css" type="text/css" />

</head>

<body>
<div id="back">
<div class="red" id="div1"></div>
<div class="red1" id="div2"></div>
<div class="red2" id="div3"></div>
</div>
<div id="content"><p>Body Content goes here!!</p></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        function startfade(){
        $("#div3").fadeIn(3000, function(){
            $(this).delay(2000).fadeOut();
            $("#div2").fadeIn(3000, function(){
                $(this).delay(2000).fadeOut();
                $("#div1").fadeIn(3000, function(){
                    $(this).delay(1000).fadeOut();
                });
        });
        });

        }
        setInterval(function() {
              startfade();
        }, 9000);   
        startfade();​
        });
</script>
</body>
</html>

这是我想在 jsFiddle 上实现的最终结果，它确实有效！http://jsfiddle.net/liveandream/TCCn8/46/

4

6 回答 6

2

尝试在 jsFiddle 中 [运行] fiddle，然后使用来自http://jsfiddle.net/draft/的代码， 这将为您提供在 jsFiddle 上使用的确切代码。这肯定会奏效。

于 2012-02-22T00:54:54.373 回答
1

如果我将 CSS 复制并粘贴到 HTML 中，它对我有用。我猜你的页面没有找到 CSS。检查 FireBug 以确认它正在查找您的 CSS 文件。

奇怪的是，当我从 SO 复制代码时。最后一个问号出现在startfade(); 它不是可见字符之后。这就是我所看到的：

startfade();?

FireBug 的 Javascript 控制台对此进行了抱怨。

于 2012-02-21T05:00:57.647 回答
1

将css放在同一个文件夹中并删除问号，它将起作用！

于 2012-02-21T05:23:52.983 回答
0

我不记得脚本标签在包含在正文中时是否被阻止。有什么阻止您将 jQuery 引用移动到头部吗？

此外，由于您自己的脚本无论如何都在使用文档就绪功能，因此您可能也不需要在正文结束标记之前使用它。由于它在那里，您可以省去文档准备功能，因为您引用的节点在脚本运行时已经添加到 DOM 中。

于 2012-02-21T05:18:27.907 回答
0

尝试安排您的代码 1st

把这个放在头标签上

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>

并首先尝试将 css 放在 head 中。采用

<style></style>
于 2012-02-21T05:21:15.743 回答
0 
the folowing example work perfectly.

<!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>Untitled Document</title>
<style>
#content{
position: relative;
z-index: 999;}
#back{
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding:0;
    margin-top: 0px;
    z-index: 1;
}

.red{
background: red;
    width: 800px;
    height: 800px;
    overflow: hidden;
    display: none;
    position: absolute;
    z-index: 1;
}
.red1{
background: green;
    width: 800px;
    height: 800px;
    display: none;
    position: absolute;
    overflow: hidden;
    z-index: 1;
}
.red2{
background: blue;
    width: 800px;
    overflow: hidden;
    height: 800px;
    display: none;
    position: absolute;
    z-index: 1;
}
</style>
</head>
<body>
<div id="back">
<div class="red" id="div1"></div>
<div class="red1" id="div2"></div>
<div class="red2" id="div3"></div>
</div>
<div id="content"><p>Body Content goes here!!</p></div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
    $(document).ready(function(){
        function startfade(){
        $("#div3").fadeIn(3000, function(){
            $(this).delay(2000).fadeOut();
            $("#div2").fadeIn(3000, function(){
                $(this).delay(2000).fadeOut();
                $("#div1").fadeIn(3000, function(){
                    $(this).delay(1000).fadeOut();
                });
        });
        });

        }
        setInterval(function() {
              startfade();
        }, 9000);   
        });
</script>
</body>
</html>
于 2013-07-02T04:42:58.133 回答