Jquery 我想用id=“banner”滑动div？

我想在点击箭头发光图像时，apDiv1被隐藏，横幅在页面上从右向左滑动。我应该添加哪些库，以及添加jqueryui库时，它说jquery是未定义的？？ 我对jquery非常陌生，请提供帮助并让我知道我代码中的更改。。。 提前谢谢

编辑 检查更新

我刚刚将位置添加到.banner选择器，并将jQuery更改为：

 $(document).ready(function(){
        $("#apDiv4").click(function(){
        $("#apDiv1").hide();
         $("#banner").show().animate({'right': '0'},900);
    });
});

完整的CSS更新带来灵活性 在动画div周围添加了容器

---

在使用jQuery的方法之前，必须将其作为单独的脚本包含在内。在提出这样的问题之前，应该始终搜索错误。谷歌：jquery没有定义。您可能会在第一次点击时得到堆栈溢出的答案。如果它说jQuery未定义，那将非常令人惊讶，因为您没有在上面的任何地方引用符号jQuery。现在如果它说，$是未定义的，那就不同了…我以前有过未定义的问题。你是在本地还是在托管网站上进行此操作？让fiddle.net的人更好地了解你，但在单击事件中，横幅仍然没有滑动。我注意到带有图像的链接没有关闭标记，因此我在右侧插入了一个链接。。单击它，横幅将滑动。让我知道您要单击哪个对象来设置横幅动画。$banner.show.animate{left:-=1860px}，慢；在右边的位置，我选择了左边：-1860但是滚动条继续这样做如何隐藏它上面的例子有一个干净的链接，让你看得更清楚。我不确定我是否了解您的具体目标：

 $(document).ready(function(){
        $("#apDiv4").click(function(){
        $("#apDiv1").hide();
         $("#banner").show().animate({'right': '0'},900);
    });
});

html{
height: 100%;

}
html, body {
    margin:0;
    padding:0;
     background-color:Silver; width:100%; height:100% 
}
.container{ max-width:80%; width:80%; height:800px; position:relative; margin:0px auto; overflow-x:hidden;}
#apDiv1 {
    position: relative;
    width: 80%;
    z-index: 1;
    padding: 0;
    display:block;
    color:#FFF;
    margin:0px auto;

}
#apDiv2 {   
    min-width: 800px;
    width: 100%;
    position: relative;
    visibility: visible;
    padding: 0;
}
#fontmain {
    font-size:250px;
    margin:0px auto;
    padding: 0;
}
#fonttag {
    font-size:30px;
    padding: 0;
}

#apDiv3 {
    margin-top:260px;
    font-size:90%;
    margin:0px auto;
}
#apDiv4 {
    margin-top:250px;
    float:left; margin:0 30px 0 0;
}

#banner {
    margin-top:100px;
    margin-left:0;
    width:100%!important;
    background-color:Transparent;
    display:none;
    z-index:1;
    position:relative;
    right:-100%;    
}
#bannerbg {
    width:100%;
    height:380px;
    margin-top:10px;
    margin-right:10px;
    display:block;
    background-color:Teal;
    z-index:-1;
    position:relative;

}
#left {
    z-index:3;
    left:28px;
    position:absolute;
    bottom:50%;
}
#right {
    z-index:3;
    position:absolute;
    margin-top:280px;
    right:20px;
    bottom:50%;
}
#bot {
    position:absolute;
    top:0px;
    left:0px;
}

<div class="container">
    <div id="banner"><img id="bot"src="icons/dark_slider_frame.png"/>
        <img id="left" alt="previous" src="icons/left.png"/>
        <img id="right" alt="next" src="icons/right.png"/>
        <div id="bannerbg"></div>
    </div> 
</div>