0

我的 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>
4

2 回答 2

1

如果您不希望它们全部一起制作动画，而是在特定时间间隔后使用：

setTimeout(function() {
    //Put in animation here
}, 2500);

其中 2500 是运行 setTimeout 中的代码之前的延迟时间（以毫秒为单位）。

于 2012-08-07T01:45:50.880 回答
1

为简单起见，我假设您希望您的元素从左向右翻译。工具提示也无关紧要，因此我将其删除。

您需要做的第一件事是为所有元素添加一个公共类。在这里，我添加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/

于 2012-08-07T02:57:04.180 回答