jQuery Animation Hover Issue

Question

I have the following code for 3 images so that when a user hovers over the image, the images zoom slightly:

<script>
    jQuery(document).ready(function() {
        jQuery('#global-banner-cp-39c170794c8a8dfc143d053961f61ce3 img').hover(function() {
            jQuery(this).animate({width: '+=25px'}, {duration: 250, queue: false});
            jQuery(this).animate({height: '+=25px'}, {duration: 250, queue: false});
        }, function() {
            jQuery(this).animate({width: '-=25px'}, {duration: 250, queue: false});
            jQuery(this).animate({height: '-=25px'}, {duration: 250, queue: false});
        });

        jQuery('#global-banner-cp-a4fa4c6ccba117d459b3c5ef05c6642d img').hover(function() {
            jQuery(this).animate({width: '+=25px'}, {duration: 250, queue: false});
            jQuery(this).animate({height: '+=25px'}, {duration: 250, queue: false});
        }, function() {
            jQuery(this).animate({width: '-=25px'}, {duration: 250, queue: false});
            jQuery(this).animate({height: '-=25px'}, {duration: 250, queue: false});
        });

        jQuery('#global-banner-cp-3de99313614c53ea391132eca046e29c img').hover(function() {
            jQuery(this).animate({width: '+=25px'}, {duration: 250, queue: false});
            jQuery(this).animate({height: '+=25px'}, {duration: 250, queue: false});
        }, function() {
            jQuery(this).animate({width: '-=25px'}, {duration: 250, queue: false});
            jQuery(this).animate({height: '-=25px'}, {duration: 250, queue: false});
        });
    });
</script>

A demo can be seen here:

https://ts361831-container.zoeysite.com/#global-wrapper-cp-09977e207fd109223f695752160117fd

This works fine if you perform the hover slowly, but if you hover quickly or hover over multiple images at once, the width and height keep decreasing.

Can anybody help me identify why this is happening? Thank you very much in advance.

Answer 1

try this! Simply you can do it with css transform

 .image-box{ width:300px; overflow:hidden; } .image { width:300px; height:200px; background-position:center; transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; } .image:hover { transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); /* IE 9 */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand'); /* IE6 and 7 */ } 

 <div class="image-box"> <img src="https://cdna4.zoeysite.com/Adzpo594RQGDpLcjBynL1z/cache=expiry:31536000/quality=v:70/compress/https://s3.amazonaws.com/zcom-media/sites/a0i0L00000QylPjQAJ/media/mediamanager/engineered.jpg" class="image"> </div> <div class="image-box"> <img src="https://cdna4.zoeysite.com/Adzpo594RQGDpLcjBynL1z/cache=expiry:31536000/quality=v:70/compress/https://s3.amazonaws.com/zcom-media/sites/a0i0L00000QylPjQAJ/media/mediamanager/built_to_last.jpg" class="image"> </div> 

JSFIDDLE