$(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('.yourclass').toggle("slide", {direction: "right"}, 1000);
  });
});

如果你的div是绝对定位的，你知道宽度，你可以使用:

#myDiv{
position:absolute;
left: 0;
width: 200px;
}

$('#myDiv').animate({left:'-200'},1000);

它会滑出屏幕。

或者，你也可以用容器div来包装它

#myContainer{
position:relative;
width: 200px;
overflow: hidden;
}

#myDiv{
position:absolute;
top: 0;
left: 0;
width: 200px;
}

<div id="myContainer">

<div id="myDiv">Wheee!</div>

</div>

$('#myDiv').animate({left:'-200'},1000);

或者你可以用

$('#myDiv').toggle("slide:right");

$("#slide").animate({width:'toggle'},350);

参考:https://api.jquery.com/animate/

你可以先定义元素的宽度为0，右浮动，然后在你要显示它的事件上。就像这样

$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);

就这么简单。

另一个值得一提的库是animation .css。它可以很好地与jQuery一起工作，您可以简单地通过切换CSS类来制作许多有趣的动画。

像. .

$（“#slide”）.toggle（）.toggleClass（'animation bounceInLeft'）;