Question

我觉得自己像一个完全白痴，我确信我只是迟到了......但是我无法让它发挥作用。在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/

Answer 1

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

Answer 2

如果我将CSS复制并粘贴到HTML中，它对我有效。我想你的页面找不到CSS。检查FireBug以确认它找到了您的CSS文件。

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

startfade();?

FireBug的Javascript控制台抱怨它。

Answer 3

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

Answer 4

我不记得脚本标签在包含在主体中时是否阻塞。有什么阻止你将jQuery引用移动到头部的东西吗？

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

Answer 5

尝试安排您的代码第1次

把它放在头标记上

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

首先尝试将css放入头中。使用

<style></style>

Answer 6

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>

jQuery在jsFiddle中工作但不在html中工作

6 个答案: