当页面加载时，从右到左设置3个DIVs动画。

Question

当页面加载时，我尝试从右到左设置3个div动画。

我的HTML是这样的-

<div id="Div1"></div>
<div id="Div2"></div>
<div id="Div3"></div>

我用jQuery .animate试过了，但不能100%弄明白。我的问题是如何实现从右到左的动画？

这是我的jQuery -

var left = $('#Div1').offset().left;
var left = $('#Div2').offset().left;
var left = $('#Div3').offset().left;

$("#Div1").css({left:left}).animate({
    width: "200px",
    height: "200px",
    left: 0
  }, {
    duration: 3000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {
    }
  });

$("#Div2").css({left:left}).animate({
    width: "200px",
    height: "200px",
    left: 0
  }, {
    duration: 3000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {

    }
  });

$("#Div3").css({left:left}).animate({
    width: "200px",
    height: "200px",
    left: 0
  }, {
    duration: 3000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {

    }
  });

这是JSFIDDLE

Answer 1

将position: absolute;和right: -150px添加到#Div1, #Div2, #Div3 css规则并删除float: left

http://jsfiddle.net/XqqtN/3446/

这是另一个难题，需要将margin-left值更改为更像您举例说明的1：http://jsfiddle.net/XqqtN/3448/

为了轻松实现效果，只需在left和/或right值中添加jQuery ui easing效果即可。下面是left值的easeOutBack ui效果，并将持续时间更改为更快，以使此效果看起来更好：http://jsfiddle.net/XqqtN/3449/

您可能希望使用不同的效果和持续时间速度进行测试，以获得您想要的确切外观和感觉，所有jQuery UI效果都在此处列出：http://api.jqueryui.com/easings/

您可能还希望在加载页面后添加1到2秒的延迟以显示动画。如果是这样，只需在动画代码(.animate())运行之前添加.delay(1000)或您想要的毫秒数即可。这也可以派上用场，帮助您以您想要的方式在网页上显示幻灯片动画。

好了，这是我最后一次玩这个，去掉了高度放松的效果，因为我认为它很可怕：http://jsfiddle.net/XqqtN/3451/

同样，您需要使用它来精确地获得您想要的结果。如果这回答了您的问题，请将其标记为答案。

编辑

今天我对它有了更多的兴趣，并让它工作起来，这样它就会像你提供的示例网址一样在页面上居中，相应地调整自己的大小以适应宽度的内容(为了更好地工作，图像是512x512像素)，在圆圈中放置头像图像，希望这正是你现在想要的：http://jsfiddle.net/tT8pj/1/和完全相同代码的全屏结果：http://jsfiddle.net/tT8pj/1/embedded/result/

因此，无论屏幕的大小如何，你都可以看到它是如何完美地调整大小并保持在中间的。如果这回答了您的问题，请将其标记为答案！但是，如果这还不能回答你的问题，我不知道还有什么可以。

干杯:)