0

我试图在页面加载时从右到左为 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

4

1 回答 1

5

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

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

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

而对于缓动效果，只需在and or值上添加一个 jQuery uieasing效果。这是该值的 ui 效果，并将持续时间更改为更快，以使此效果看起来更好：http: //jsfiddle.net/XqqtN/3449/leftrighteaseOutBackleft

您可能想要测试不同的效果和持续时间速度以获得您想要的确切外观，所有 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/嵌入/结果/

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

干杯:)

于 2013-08-12T05:43:19.893 回答