Jquery Slide功能

Question

我有点困惑，因为我应该如何将我的jquery连接到我的页面，而且我仍然相对较新的学习javascript / jquery。当我把脚本放在头部时，当我点击我在下面的文件中设置时没有任何反应。但在我的jfiddle它工作正常。

我的网站有一部分我希望有一个模拟iphone，访问该页面的人可以点击它。

我在堆栈溢出时使用了这个jfiddle： how to make div slide from right to left

有一个链接到jqueryui并显示那里的幻灯片效果的脚本。我应该在头脑中使用它吗？

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

这是我的jfiddle，我略微调整了我想要实现的目标： http://jsfiddle.net/tokyothekid/weujtht5/

这是我目前的代码：

<link rel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


<script>
$( document ).click(function() {
  $('#iphone-button1').click(function(){

                if ($('#iphone-panel2').is(':hidden')) {

                   $('#iphone-panel2').show('slide',{direction:'right'},1000);
                } else {

                   $('#iphone-panel2').hide('slide',{direction:'right'},1000);
                }
});
    </script>

这是我的HTML：

    <div id="iphone-panel1">
       logo 
       <a id="iphone-button1">start</a>
    </div>
<div id="iphone-panel2">User Area</div>

我的CSS：

#iphone-panel1{
    width:200px;
    height:200px;
   position:absolute;
}

a {
    color: #000;
    cursor:pointer;
    display:block;
}
#iphone-panel2 {
    width: 200px;
    height: 200px;
    display: none;
    background: red;
    position:relative;
}

感谢所有帮助