IE8:Image disappearing while rotating using jQuery Rotate

Question

We had an image, which seems to be vanishing for a second while rotating.This issue exists in IE8 and works fine in IE9 and other HTML5 supported browsers. We have used jQuery rotate plugin.

HTML

<img id="obj" src="obj.png"/>

CSS

#obj {
    position:absolute;
    left: 196px;
    top: 94px
}

JS

       $("#obj").animate({
                left: 5,
                top: 232
          }, {
                duration: 700,
       });
       $("#obj").rotate({
                angle: 0,
                animateTo: -64,
                duration: 2000
       });

Kindly give suggestions for the same.

Answer 1

You can simply do this by

CSS:

 $("#obj").mouseenter(function(){
 $(this).css("transform","rotate(-720deg)");
 $(this).css("transition","400ms");
 $(this).css("z-index","1");
});
$("#obj").mouseleave(function(){
 $(this).css("transform","rotate(0deg)");
 $(this).css("z-index","0");
});