加载页面时,从右到左动画3个DIV.

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, #Div3CSS规则,并删除float: left

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

这是另一个小提琴,将margin-left值更改为更像您放大的1:http: //jsfiddle.net/XqqtN/3448/

而对于easinge的影响,只需easing在left和或right值上添加一个jQuery ui 效果.这是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/

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

编辑

今天有了它的乐趣,并让它工作,以便它将在你提供的示例URL中居中在页面上,调整自身以相应地适应宽度的内容(为此工作得很好,图像是512x512像素),将爆头图像放在圆圈中,希望这正是你现在所追求的:http: //jsfiddle.net/tT8pj/1/和相同确切代码的全屏结果:http: //jsfiddle.net/tT8pj/ 1 /嵌入/结果/

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

干杯:)