我在一个网站上工作，我想向图像按钮添加简单的动画效果。
在这种情况下，我需要单击时按钮变小。
问题在于图像按钮的大小调整不是围绕其中心（如我所愿），而是从图像的左上角调整。
您可以在此处获得更好的理解链接：
http://www.corioki.com/pulsante.php
如您所见，单击图像会调整按钮的大小，而不是围绕按钮的中心。
我该怎么办才能解决此问题？
HTML代码：
<html>
<head>
<title>resizing</title>
<link rel="stylesheet" type="text/css" href="pulsante.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
alert("jQuery is working!");
});
$(document).ready(function(){
$("#myDiv").click(function(){
$("#hicon").animate({height:'50%', width:'50%'});
});
});
</script>
</head>
<body>
<h1>button</h1>
<div id="myDiv">
<a id="home" href="http://www.corioki.com/pulsante.php"><img id="hicon" src = "img/button_home_ita.png" /></a>
</div>
</body>
感谢您的关注和问候！
马泰奥
最佳答案
我认为您有2种选择。您可以使用Jquery在宽度/高度的同时为边缘设置动画：
DEMO
$("#myDiv").click(function(){
$("#hicon").animate({height:'50%', width:'50%', 'margin-left':'25%','margin-top':'25%'});
});
或者您使用CSS3过渡/转换：
DEMO
$("#myDiv").click(function(){
$('#home').toggleClass('active');
});
a#home {
transition: all 0.2s linear;
display:block;
}
a#home img {
width: 100%;
}
a#home.active {
transform: scale(0.5);
}
关于jquery - jQuery，如何在他的中心周围调整图像大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21854112/