Question

http://www.apple.com/mac/（动画定位的产品）

任何人都知道苹果这样做了吗？

我不需要可用的代码。只是想知道如何实现它。

我使用jQuery框架。

编辑：感谢乔丹指出这一点。 Apple正在使用css3动画，而不是javascript。

如果有人对JS这样做有好主意请发帖。

Answer 1

Apple正在使用CSS3动画。查看CSS file并向下滚动到/* animations。

Answer 2

这里我在jQuery中创建了一个版本，适用于所有浏览器。使用这种技术，你有很多方法可以使用不同的CSS方法，比如相对的内部的绝对div等，然后使用jQuery的animate函数改变这些值。我尽可能简单。

http://jsfiddle.net/sanbor/SggMG/

HTML

<div class="box">one</div>
<div class="box">two</div>
<div class="box">three</div>
<div class="clearFloat"></div>
<a id="resetAnimation" href="#">Run animation again</a>

CSS

.box {
    background: red;
    width: 100px;
    height: 50px;
    margin: 10px;
    float: left;
    margin-left: 100%;
}
.clearFloat {
    clear: both;
}

JS

function animateBoxes() {
    $('.box').each(function(index, element) {
        $(element).animate({
            'marginLeft': '10px'
        }, {
            duration: 500,
            specialEasing: {
                marginLeft: 'easeOutBounce'
            }
        }, function() {
            // Animation complete.
        });
    });
}

$('#resetAnimation').click(function() {
    $('.box').css('marginLeft', '100%');
    animateBoxes();
});

animateBoxes();

替代方式，使用css3（http://jsfiddle.net/sanbor/SggMG/6/）这也可以通过css3过渡来完成，这更多，因为只需在属性更改之间添加平滑效果，但动画允许应用某些 HTML

<div class="box">one</div>
<div class="box">two</div>
<div class="box">three</div>
<div class="clearFloat"></div>
<a id="resetAnimation" href="#">Click twice</a>

CSS

.clearFloat {
    clear: both;
}

.box {
    background: red;
    width: 100px;
    height: 50px;
    margin: 10px;
    float: left;
}

.box.moveit{
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 1s;
    -moz-animation-name: moveit;
    -moz-animation-duration: 1s;
    -ms-animation-name: moveit;
    -ms-animation-duration: 1s;
    animation-name: moveit;
    animation-duration: 1s;
}

@-webkit-keyframes moveit {
  from {
        margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}

@-moz-keyframes moveit {
  from {
        margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}

@-ms-keyframes moveit {
  from {
        margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}

@keyframes moveit {
  from {
        margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}

JS

$('#resetAnimation').click(function() {
    $('.box').toggleClass('moveit');
});

Apple.com产品动画

2 个答案: