jQuery работает в jsFiddle, но не в html - PullRequest
Новая
       19

jQuery работает в jsFiddle, но не в html

3 голосов
/ 21 февраля 2012

Я чувствую себя полным идиотом, и я уверен, что только что опоздал ... но я не могу заставить это работать.На 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/

Ответы [ 6 ]

2 голосов
/ 22 февраля 2012

Попробуйте [запустить] скрипку в jsFiddle, а затем использовать код из http://jsfiddle.net/draft/ Это даст вам точный код, используемый в jsFiddle.Это определенно сработает.

1 голос
/ 21 февраля 2012

Поместите css в ту же папку и удалите вопросительный знак, и он будет работать!

1 голос
/ 21 февраля 2012

Если я копирую и вставляю CSS в HTML, это работает для меня.Я думаю, что ваша страница не находит CSS.Проверьте FireBug, чтобы убедиться, что он находит ваш файл CSS.

Что-то странное в том, что когда я скопировал код из SO.После последнего startfade(); появляется знак вопроса, это не видимый символ.Вот что я вижу: 

startfade();?

Консоль Javascript в FireBug жаловалась на это.

0 голосов
/ 02 июля 2013 
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 голосов
/ 21 февраля 2012

попробуйте организовать свой код 1-й

поместите это в заголовок тега 

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

И попробуйте сначала поставить css в голову тоже. использовать 

<style></style>
0 голосов
/ 21 февраля 2012

Не могу вспомнить, блокируются ли теги скрипта при включении в тело. Что-то мешает вам перенести ссылку jQuery на голову?

Кроме того, поскольку ваш собственный скрипт в любом случае использует функцию готовности к документу, вам, вероятно, он также не нужен непосредственно перед закрывающим тегом тела. Так как она есть, вы можете отказаться от функции готовности документа, потому что узлы, на которые вы ссылаетесь, уже добавлены в DOM к моменту запуска сценария.

...