我是这样做的:

var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});

注意，节点“btn”应该在动画之前隐藏，您可能还需要为它设置“position: absolute”。

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

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

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

像. .

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

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

这可以通过使用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

看看这个使用jQuery UI的小提琴的工作示例。 这是我最初从左到右使用的解决方案，但我将其改为从右到左工作。

它允许用户快速点击链接，而不会破坏可用面板之间的动画。

JavaScript代码很简单:

$(document).ready(function(){
    // Mostra e nascondi view-news
    var active = "europa-view";
    $('a.view-list-item').click(function () {
        var divname= this.name;
        $("#"+active ).hide("slide", { direction: "right" }, 1200);
        $("#"+divname).delay(400).show("slide", { direction: "right" }, 1200);
        active = divname;
    });
});

在Fiddle链接中获取HTML和CSS。

增加白色背景和左填充只是为了更好的效果呈现。