Home/ Questions/Q 8336501
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T04:00:35+00:00

I have few elements in my HTML page which are only images and tooltip.

  • 0

I have few elements in my HTML page which are only images and tooltip. I wanted them to animate randomly based on the animation I have done on the CSS part.

Currently all the elements will animate together when the page is loaded, I do no want this.

I am thinking of calling the CSS class from jQuery one by one, but looking at the number of elements and since it is just a basic translation animation, is there any better way to do this?

Here are the elements:

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    For the sake of simplicity I’m going to assume you want your elements to to be translated from left to right. The tooltips are also irrelevant, so I’ll remove them.

    The first thing you need to do is add a common class to all your elements. Here I added share as a class:

    <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>

    Then your CSS should look something like this…

    .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); 
}

    ​Then you need a little bit of javascript to fire off the first animation, and then listen when each trasition ends to fire off the next one…

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

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

    You can find it all put together here: http://jsfiddle.net/HYAWj/

    • 0