为什么我的网页过渡无效？（HTML，CSS，JavaScript）

Question

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>
<a id="myLink" href="#">
            Click to slide in new page
    </a>


<iframe id="newPage" src="http://jsfiddle.net"></iframe>
</body> 
</html>

这是我的CSS：

 #myLink {
 position: absolute;
}

iframe {
width: 100%;
height: 100%;
top: 100%;    
 position: fixed;
 background-color: blue;

}

而我的JavaScript：

$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});

我实际上是从此源复制并粘贴http://jsfiddle.net/TheGAFF/hNYMr/，以使用iframe实现网页之间的转换，但是由于某些原因，当我在浏览器中尝试此简单代码时，它不起作用。 当我将其链接到index.html时，我看不到为什么这在浏览器中不起作用。 有人可以帮忙吗？ 谢谢。

编辑：CSS页面中的“ #myLink”没有被注释掉，只是碰巧在问题中这样格式化。

Answer 1

在您的JavaScript控制台中查看 。 期望看到有关未定义$的错误。

参见以下代码：

<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

首先，您加载脚本，该脚本尝试使用$ 。 然后，您尝试加载定义$ jQuery。

交换订单或脚本元素。

然后，您还有第二个问题。

$("#myLink")

脚本运行时，文档中没有id="myLink"元素。

直到4行之后，它才会添加到DOM中。

或者：

移动脚本，使其出现在您尝试访问的元素之后
使用事件处理程序（例如DOM Ready）：

这样：

$( function () {
    $("#myLink").click(function () {
        $('#newPage').transition({top: '0%' });
    });
} );

使用委托事件

这样：

$(document).on("click", "#myLink", function () {
    $('#newPage').transition({top: '0%' });
});

Answer 2

编辑; 抱歉，您已经这样做了。

尝试将您的js文件放入js库文件下。

为什么我的网页过渡无效？（HTML，CSS，JavaScript）

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-07-20 12:28:40

解决方案2
0 2015-07-20 12:20:45

为什么我的网页过渡无效？ （HTML，CSS，JavaScript）

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-07-20 12:28:40

解决方案2 0 2015-07-20 12:20:45

为什么我的网页过渡无效？（HTML，CSS，JavaScript）

解决方案1
1 已采纳 2015-07-20 12:28:40

解决方案2
0 2015-07-20 12:20:45