JavaScript无法处理我的html文档

我的HTML文档上有一个按钮，如下所示

<input type = "submit" value = "Manuals and Coaching Tools" class = "col-sm-1" style="white-space:normal;" id = "mac">

我在文档的底部有一块jQuery。当点击按钮时，它应该在id为“gold”的div中淡出

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">
$(document).ready(function () {
  $('#mac').click(function(){    
    $('#gold').fadeIn('slow');
  });
});
</script>

$（文档）.ready（函数（）{
$（'#mac'）。单击（函数（）{
美元（'gold'）。法登（'slow'）；
});
});

然而，代码似乎不起作用/触发，什么也没有发生。任何关于为什么会发生这种情况的建议都将不胜感激

---

注意：显示：css中的“黄金”div没有应用，但我希望该div在单击按钮后淡入。

拆分脚本标记：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">
$(document).ready(function () {
  $('#mac').click(function(){    
    $('#gold').fadeIn('slow');
  });
});
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
  $('#mac').click(function(){    
    $('#gold').fadeOut('slow');
  });
});
</script>

$（文档）.ready（函数（）{
$（'#mac'）。单击（函数（）{
$（'gold'）。淡出（'slow'）；
});
});

---

编辑：

像这样更改javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $('#mac').click(function(){   
    $('#gold').fadeOut('slow');
  });
});


</script>

$（文档）.ready（函数（）{
$（'#mac'）。单击（函数（）{
$（'gold'）。淡出（'slow'）；
});
});

下面是一个工作示例：

$（文档）.ready（函数（）{
$（“#mac”）。单击（“输入”，函数（）{
$（'gold'）。淡出（'slow'）；
});
});

一些内容
如果您的div#gold是display:none；
您需要将jqery更新为fadeIn（“慢”）

试试这个

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <input type = "submit" value = "button" class = "col-sm-1" style="white-  space:normal;" id = "mac">
    <div id="gold" style="display:none">
    hello
    </div>
    <script>
            $(document).ready(function () {
                $('#mac').click(function(){ 
                   $('#gold').fadeIn('slow')
            });
    });
    </script>


你好
$（文档）.ready（函数（）{
$（'#mac'）。单击（函数（）{
$（'gold'）.fadeIn（'slow'））
});
});
我想你的拼写有误。将淡出（'slow'）

更改为淡出（'slow'）。如果在淡入淡出效果发生之前发现页面正在更改，则代码可以。显示你的

#gold

如果你想让它淡入，你不应该使用淡出（）好的，我为你的输入错误道歉。它被更改为fadeIn（），但仍然没有发生任何事情。它是否与显示有关：none？@JaxonCrosmas在加入了我建议的修复之后。