javascript - jQuery 动画悬停问题

Question

我有 3 个图像的以下代码，以便当用户将鼠标悬停在图像上时，图像会稍微缩放:

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

可以在此处查看演示:

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

如果您缓慢执行悬停，这效果很好，但如果您快速悬停或一次悬停在多个图像上，宽度和高度会不断减小。

任何人都可以帮我确定为什么会发生这种情况吗？预先非常感谢您。

Answer 1

试试这个!只需使用 css 变换即可实现

.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