这可以通过使用jQueryUI隐藏/显示方法来实现。 如。

    // To slide something leftwards into view,
    // with a delay of 1000 msec
    $("div").click(function () {
          $(this).show("slide", { direction: "left" }, 1000);
    });

参考:http://docs.jquery.com/UI/Effects/Slide

如果你的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);

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

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

请看这里的例子。

$("#slider").animate({width:'toggle'});

https://jsfiddle.net/q1pdgn96/2/

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

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

就这么简单。

一个没有jQuery UI的从右向左动画的例子，只使用jQuery(任何版本，见https://api.jquery.com/animate/)。

$(document).ready(function() { var contentLastMarginLeft = 0; $(".wrap").click(function() { var box = $(".content"); var newValue = contentLastMarginLeft; contentLastMarginLeft = box.css("margin-left"); box.animate({ "margin-left": newValue }, 500); }); }); .wrap { background-color: #999; width: 200px; overflow: hidden; } .content { width: 100%; margin-left: 100%; background-color: #eee; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> click here <div class="content"> I would like to have a div go from collapsed to expanded (and vice versa), but do so from right to left. Most everything I see out there is always left to right. </div> </div>