Question

我知道这可能看似重复，但我无法在我的网站上运行jQuery。我在这里看了很多帖子，但似乎仍无法找到答案。

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
<title>Rodeo Rich's Steakhouse</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Holtwood+One+SC" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<header>
    <a href="index.html"><img src="img/logo.png" id="logo" alt="Rodeo Rich's Steakhouse"></a>
</header>
<nav>
    <ul>
        <li><a href="menu.html">MENU</a></li>
        <li><a href="story.html">OUR STORY</a></li>
        <li><a href="giftcards.html">GIFT CARDS</a></li>
        <li><a href="contact.html">CONTACT US</a></li>
    <ul>
</nav>
<img src="img/logo.png" id="pic" alt="Rodeo Rich's Steakhouse">
</body>
</html>

以下是我的JavaScript文件中的代码，该代码并未对＃34;＃pic＆＃34;执行任何操作：

$(document).ready(function(){
$("#pic").fadeIn("slow");
});

我知道我的.js文件的路径名是正确的
我的部分也有Google CDN。

非常感谢所有帮助！：）

Answer 1

您的图片必须先隐藏才能淡入，例如您可以执行以下操作：

$(document).ready(function(){
    $("#pic").hide().fadeIn("slow");
});

Answer 2

您必须先隐藏您的图片（使用CSS display:none或使用jQuery .hide）。

这有效：

$('#pic').hide();

$('button').click(function () {
    $('#pic').fadeIn('slow');
});

的 DEMO

JQuery .fadeIn不在我的网站上工作

2 个答案: