修改

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/

对于easingeffects，只需将jQuery ui easing效果添加到left和/或right值即可。这是对easeOutBack值的left ui效果，并将持续时间更快一点，以使此效果看起来更好：http://jsfiddle.net/XqqtN/3449/

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

您可能还希望在加载页面后添加1或2秒延迟以显示动画。如果是这样，只需在动画代码（.delay(1000)）运行之前添加.animate()或许多毫秒。这也有助于以您希望它在网页上发挥作用的精确方式显示幻灯片动画。

好的，所以这是我最后一次玩这个，取消了高度缓和效果，因为我觉得它很可怕：http://jsfiddle.net/XqqtN/3451/

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

修改

今天玩得更开心，并让它工作，以便它将自己置于页面中，就像你提供的示例网址一样，调整自身大小以适应相应宽度的内容（为此工作得很好，图像为512x512像素），将爆头图像放在圆圈中，希望这正是您现在所追求的：http://jsfiddle.net/tT8pj/1/和相同确切代码的全屏结果：http://jsfiddle.net/tT8pj/1/embedded/result/

所以，你可以看到它如何完美地调整大小并且仍然保持在中间，而不管屏幕的大小。如果这回答了您的问题，请将其标记为答案！但是，如果这没有回答你的问题，我不知道会发生什么。

干杯：）

加载页面时，从右到左动画3个DIV。

1 个答案:

修改