To show while animate and animate and hide

Question

Working on an assignment on hover of an image, i have to rotate the image then once image rotation is complete i have to animate another object and then on mouse out rotate the initial image in its original position and then the second object should be animated toward it's initial position and then hide.

Every thing is done but the only problem is while animating to showing object and on mouse out hiding object.

Working DEMO here.

Used javascript is

function rotate(degree,el,direction) {
          var interval = null,
          counter = 0;
          interval = setInterval(function(){
            if (direction == "anti_clockwise" ? counter >= degree : counter <= degree) {
              console.log(counter);
              el.css({
                MozTransform: 'rotate(-' + counter + 'deg)',
                WebkitTransform: 'rotate(' + counter + 'deg)',
                transform: 'rotate(' + counter + 'deg)'
              });
              if(direction == "anti_clockwise"){
                counter = counter - 1;
              }else if(direction == "clockwise"){
                counter = counter + 1;
              }
            }
            if (counter == degree && direction == "anti_clockwise") {
              clearInterval(interval);
              $("#prodShareIconDetails ul").animate({"left":"39px"},"slow");
            }
            if (counter == degree && direction == "clockwise") {
              clearInterval(interval);
              $("#prodShareIconDetails ul").animate({"left":"200px"},"slow", function(){

              });
            }
          }, 10);
      }
      $("#prodShareIcon").mouseover(function() {
        rotate(-39,$(this),"anti_clockwise");
      }).mouseout(function() {
        console.log(1);
        rotate(39,$(this),"clockwise");
      });

Can someone help me to understand where i am doing wrong?

Initially element with id prodShareIconDetails should be hidden and then show on hover.

Answer 1

This is not exactly a trivial problem. My guess is that on hover you want the icon to rotate, upon completion of that animation, the bar starts to extend outward. Whenever the mouse leaves, the whole process unwinds in the same order. Currently it's very glitchy if you leave early or mid animation, sometimes ending up in a totally broken state.

If I was you I would separate your animations into distinct functions. 1) rotate 2) extend, 3) unrotate, 4) retract. Next you string them together by callbacks so that when one completes it calls the other, but using CSS transitions it's a little tougher since it's event based. The jQuery transit plugin is perfect for making that easy. When rotate is complete, it calls extend. When the mouseout occurs, it halts all animations, and, depending on how far it got, retracts and unwinds.

Regarding showing the bar, you actually want the bar visible (so the user can see it extend). To accomplish this, put the bar inside another div which will act as a "window" of sorts with overflow: hidden; position: relative; overflow: hidden; position: relative; . Then position the bar position: absolute; so that when it shouldn't be visible it's positioned outside the visible space of our "window". This "window" and "track" method is common for doing sliding animations. One example is Hulu , check out the "popular shows" and other sliders midway down the page.

Answer 2

Fixed DEMO IS HERE

TRICK WRAPPER WIDTH 0 AND MOVE THE ELEMENT IN RIGHT

#prodShareIconDetails{
width: 0px;
position: absolute;
top: -16px;
right: 10px;
z-index:10;
overflow:hidden;
}