当前位置： 文江博客话题详情

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

发布于 2025-01-07 12:16:37 字数 1671 浏览 5 评论 0原文

我感觉自己像个十足的白痴，而且我确信我只是来晚了……但我无法让它发挥作用。在 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/

原文

I feel like a complete idiot, and I am sure I am just up to late... but I can not get this to work. On jsFiddle it works wonderfully but when I put it on my html document it does not. Please help! I do not know where the error is. Here is my 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>

And here is the end result I want to achieve on jsFiddle, where it does work! http://jsfiddle.net/liveandream/TCCn8/46/

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（6）

傲世九天 2025-01-14 12:16:37

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

Try to [Run] the fiddle in jsFiddle and then use code from http://jsfiddle.net/draft/
This will give you the exact code used on jsFiddle.
This will definitely work.

回复 原文
橙味迷妹 2025-01-14 12:16:37

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

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

startfade();?

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

If I copy and paste the CSS into the HTML it works for me.
I guess your page is not finding the CSS. Check FireBug to confirm that it is finding your CSS file.

Something strange is that when I copied the code from SO. A question mark appears after the last startfade(); it is not a visible character. This is what I see:

startfade();?

FireBug's Javascript console complained about it.

回复 原文
我们的影子 2025-01-14 12:16:37

将css放在同一个文件夹中并删除问号，它就可以工作了！

Put css in the same folder and remove questionmark and it will work!

回复 原文
我偏爱纯白色 2025-01-14 12:16:37

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

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

I can't remember if script tags are blocking when included in the body. Is there anything preventing you from moving the jQuery reference to the head?

Also, since your own script is using the document ready function anyhow, you probably don't need it just before the body closing tag either. Since it's there, you could dispense with the document ready function because the nodes you're referencing are already added to the DOM by the time the script runs.

回复 原文
一刻暧昧 2025-01-14 12:16:37

尝试安排你的代码，首先

将其放在 head 标签上

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

，然后尝试首先将 css 也放在 head 中。使用

<style></style>

try to arrange your code 1st

put this on the head tag

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

And try first to put css in head too. use

<style></style>
回复 原文
删除→记忆 2025-01-14 12:16:37
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>

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>
回复 原文
~没有更多了~

关于作者

顾铮苏瑾

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

空城旧梦

文章 0 评论 0

破晓

文章 0 评论 0

半仙

文章 0 评论 0

宫墨修音

文章 0 评论 0

17780639550

文章 0 评论 0

潮男不是我

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文