Javascript 使用jQuery从右向左滑动DIV

我使用jQuery代码在加载时从左到右为div设置动画，然后单击close按钮，div从右到左隐藏。它工作得很好，只是水平方向不是从左到右，而是对角方向。我做错了什么？下面是我正在使用的代码示例

---

非常感谢您的帮助。

您应该在脚本中包含jQuery UI，并稍微更改一下功能：

$(function(){
$("#content-box").hide(0).delay(0).toggle('slide', {
        direction: 'left'
    }, 1000);
});

---

这是一个更新的JSFIDLE:

您可以尝试使用

.animate（）

而不是

.hide（）

和

.show（）

。这会让你对一切都有更多的控制

$("#content-box").animate({'width': 240},500);

若要关闭，请包含一个回调函数，以便在动画结束后将“显示”设置为“无”：

$("#content-box").animate({'width': 0},500,function(){
       $("#content-box").css('display','none');
});

$（“#内容框”）。动画（{width:'toggle'}）

所有发布的技术都有效，但我更喜欢这一个，因为正如您所说，它提供了更多的控制。唯一的问题是，它不是滑入，它只是显示出来，当关闭它时，确实向右滑动，但它挤压文本，而不是实际滑动文本。这里是我使用脚本的地方。您必须首先在css中指定该元素的宽度为0，作为动画的起点。至于文本“挤压”，为了避免在文本周围有一个固定宽度的包装器，然后设置
overflow:hidden。这样，内容框的宽度将缩小，但其内容将保持固定宽度。非常感谢Blake，它工作得非常好。不过有个小问题。我需要在框向右滑动之前添加一个5s延迟，因此我在代码“$（“#内容框”）.delay（5000）.animate（{'width'：300}，1000）；”中添加了一个.delay（5000）现在它首先显示文本，5秒后它消失，并开始动画。[这是一个例子]（）溢出：隐藏
css需要位于div上，id为content box（#content box）。这是使文本看不见的原因，直到框的宽度变得足够大，文本才可见。谢谢Maxim，这段代码很有效，非常有用，但我正在尝试将更少的脚本加载到页面中。但我肯定会在其他项目中使用它。和所有其他项目一样，这个项目也很有效，但我正试图减少加载代码的使用。谢谢你的帮助，约瑟夫。
$("#content-box").animate({'width': 0},500,function(){
       $("#content-box").css('display','none');
});