jQuery working in jsFiddle but not in html

问题

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/

回答1:

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.

回答2:

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.

回答3:

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

回答4:

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.

回答5:

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>

回答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>

来源：https://stackoverflow.com/questions/9372378/jquery-working-in-jsfiddle-but-not-in-html

标签

jquery

html

jsfiddle