Question

I have a problem with animating an image with JS. When I only animate width and height it works fine. Problem occurs when I add top/marginTop, or left/marginLeft to it. The reason I want to use it, is the zoom effect. However I think it is firstly adding width and height, than it adds top/left values. It produces “twitching” effect which looks bad and I can’t get rid of it.

here is working example of my simple slider http://łuckoś.pl/slider/

I tried everything, even the jQuery.fx.interval = 50;

thank you for your time

Answer 1

For better result, you must use CSS properties like that:

#container{
    overflow:hidden;
    width:489px;
    height:178px;
    position:relative;

}
#container img{
    position:relative;
    margin:auto;
    -webkit-transition: all 4s ease-out;
    -moz-transition: all 4s ease-out;
    -o-transition: all 4s ease-out;
    transition: all 4s ease-out;
}

#container img.zoom { 
   -moz-transform: scale(2);
   -webkit-transform: scale(2);
   -o-transform: scale(2);
   transform: scale(2);
   -ms-transform: scale(2);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
   M11=2, M12=-0, M21=0, M22=2);
}

and javascript :

$().ready(function(){
    $('img').addClass('zoom');
}); 

When you add zoom class, the image is scaled to 2 in 4 secondes.

See the complete demonstrate : http://jsfiddle.net/rNY6T/18/