jQuery working in jsFiddle but not in html

2019-07-07 06:31发布

站内问答 / jQuery
1234 6 5

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/

6条回答
Emotional °昔
2楼-- · 2019-07-07 06:49

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.

查看更多
0人赞 添加讨论(0) 举报
叛逆
3楼-- · 2019-07-07 06:51

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.

查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
4楼-- · 2019-07-07 06:59

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.

查看更多
0人赞 添加讨论(0) 举报
一夜七次
5楼-- · 2019-07-07 06:59

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>
查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
6楼-- · 2019-07-07 07:01 
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>
查看更多
0人赞 添加讨论(0) 举报
啃猪蹄的小仙女
7楼-- · 2019-07-07 07:05

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)