0

HTMLページには、画像とツールチップのみの要素がいくつかあります。CSS部分で行ったアニメーションに基づいてランダムにアニメーション化してもらいたいと思いました。

現在、ページが読み込まれると、すべての要素が一緒にアニメーション化されます。これは必要ありません。

jQueryからCSSクラスを1つずつ呼び出すことを考えていますが、要素の数を見て、それは単なる基本的な翻訳アニメーションなので、これを行うためのより良い方法はありますか？

要素は次のとおりです。

<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が必要です。次に、各トラクションが終了したときに聞いて、次のアニメーションを開始します...

//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 に答える