Can'；不要让右键jQuery选项卡正确设置动画

我正在使用CSS和jQuery的组合在浏览器的右侧创建一组选项卡，它可以正常工作，只有一个缺陷。右侧显示的图像供用户单击，并让选项卡的其余部分滑入视图，只是“弹出”到它们应该在的位置，而不是滑动，而实际内容则正确滑入

我曾尝试在tab handle容器类上使用.animate和其他效果，但都没有成功。我已经在下面发布了我的HTML、jQuery和CSS代码，以获取您可以提供的任何提示。另外，我希望在IE8和IE9中进行这项工作，目前并不真正关心其他浏览器。谢谢

HTML和jQuery

---

在MrSlayer的帮助下，使用

解决了这个问题。toggle

将两个元素都放在一个div中，通过CSS关闭滚动，然后使用这个选项

$(document).ready(function(){
    $(".myhandle").toggle(function(){
        $(".slider", $(this).parents("li")).animate({right: "+=200"}, 700);
     },
    function() {
        $(".slider", $(this).parents("li")).animate({right: "-=200"}, 700);
      }
    );
});

---

看起来您正在将动画应用于

.content

。图像不在

.content

中。您是否尝试将动画仅应用于

li

或同时应用于

.content

和

.tab handle container

？MrSlayer我已尝试将.animate添加到

.tab handle container

，它似乎无法正确应用效果，或者我的编码错误。据您所知，是否可以执行不显示/隐藏元素，而是前后移动元素的

.toggle（）

？将两个函数传递到

.toggle（）

方法中。查看更多信息。啊，我甚至不知道它是这样存在的。谢谢，我来做实验

html {margin: 0px;}

.myhandle { 
    cursor: hand;
}
.container {
right: -210px;
width: 240px;
height: 240px;
}
.tab-handle-container {
margin: 0px;
border: 0px;
width: 40px;
float: left;
}
.content{
padding: 5px;
float: left;
width: 200px;
background-color: #ffffff;
}

$(document).ready(function(){
    $(".myhandle").toggle(function(){
        $(".slider", $(this).parents("li")).animate({right: "+=200"}, 700);
     },
    function() {
        $(".slider", $(this).parents("li")).animate({right: "-=200"}, 700);
      }
    );
});