jquery - 通过 CSS 实现不同的动画

Question

我的 HTML 页面中的元素很少，只有图像和工具提示。我希望它们根据我在 CSS 部分制作的动画随机制作动画。

目前，当页面加载时，所有元素都会一起动画，我不希望这样。

我正在考虑一个一个地从 jQuery 调用 CSS 类，但是查看元素的数量，因为它只是一个基本的翻译动画，有没有更好的方法来做到这一点？

元素如下:

<div class="twitter-animate">
  <div id="twitter-wrap"><a href="#" id="twitter"><img src="img/link-twitter.png"></a></div>
    <div id="twitter-tooltip"><span>Tweet!</span></div>
</div>


    <div id="youtube-wrap"><a href="#" id="youtube"><img src="img/link-youtube.png"></a></div>
    <div id="youtube-tooltip"><span>YouTube</span></div>

    <div id="facebook-wrap"><a href="#" id="facebook"><img src="img/link-fb.png"></a></div>
    <div id="facebook-tooltip"><span>Facebook</span></div>

    <div id="newspaper-wrap"><a href="#" id="newspaper"><img src="img/link-newspaper.png"></a></div>
    <div id="newspaper-tooltip"><span>Newspaper</span></div>

    <div id="www-wrap"><a href="#" id="www"><img src="img/link-www.png"></a></div>
    <div id="www-tooltip"><span>Put your URL!</span></div>

    <div id="email-wrap"><a href="#" id="email"><img src="img/link-email.png"></a></div>
    <div id="email-tooltip"><span>Mail me!</span></div>

Answer 1

为了简单起见，我假设您希望元素从左向右平移。工具提示也不相关，所以我将删除它们。

您需要做的第一件事是为所有元素添加一个公共(public)类。在这里，我将 share 添加为一个类:

<div id="twitter-wrap" class="share"><a href="#" id="twitter">Twitter</a></div>
<div id="youtube-wrap" class="share"><a href="#" id="youtube">YouTube</a></div>
<div id="facebook-wrap" class="share"><a href="#" id="facebook">Facebook</a></div>
<div id="newspaper-wrap" class="share"><a href="#" id="newspaper">Newspaper</a></div>
<div id="www-wrap" class="share"><a href="#" id="www">WWW</a></div>
<div id="email-wrap" class="share"><a href="#" id="email">Email</a></div>

那么你的 CSS 应该看起来像这样......

.share {
  width: 100px;
  background-color: #333;
  padding: 3px  0 3px 10px;
  margin-bottom: 3px;
  -webkit-transform: translate(-100px, 0);
  -moz-transform: translate(-100px, 0); 
  -o-transform: translate(-100px, 0);  
  -ms-transform: translate(-100px, 0); 
   transform: translate(-100px, 0); 
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease; 
  -o-transition: all 500ms ease;  
  -ms-transition: all 500ms ease;
   transition: all 500ms ease;    
}

.share.animate {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0); 
  -o-transform: translate(0, 0);  
  -ms-transform: translate(0, 0); 
   transform: translate(0, 0); 
}

然后你需要一点 javascript 来触发第一个动画，然后在每个 trasition 结束时监听以触发下一个...

//after document ready
$(".share").first().addClass("animate")

$(".share").bind("webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend", function(e){
  $(e.target).next('.share').addClass("animate");
})

您可以在这里找到所有内容:http://jsfiddle.net/HYAWj/