javascript - margin 不会动画回到 0？

Question

我试图在限制按钮位置的同时设置按钮大小的动画。它完美地动画到它的小尺寸。

但是动画到更大的尺寸不起作用，因为边距立即设置为 0px，因此没有动画。

例子如下:

jQuery(document).ready(function(){
	
		quickPickSelection();
		
	});
	
	function quickPickSelection() {

		var sectionIcons = jQuery("#quickPicks ul.sectionIcons li a");
		
		sectionIcons.click(function(){
					
			var icon = jQuery(this).children("span.iconContainer");

			
			if (!icon.hasClass("small")){
			
				icon.stop(true).animate({margin: 20, width: 40, height: 40},200).addClass("small");
			
			} else {
				
				icon.stop(true).animate({margin: 0, width: 80, height: 80},2000).removeClass("small");
					
			}
			
			return false;
		});

	}

#quickPicks {
	
	float: left;
	width: 930px;
}
.sectionIcons {
	list-style: none;
	margin: 0 auto;
	width: 810px;
	padding: 10px;
	overflow: hidden;
}
.sectionIcons li {
	padding: 0;
	margin: 0;
	float: left;
	margin: 0 10px 0 0;
	width: 80px;
}
.sectionIcons li .iconContainer {
	border: solid 1px #d8eaf0;
	margin: auto;
	display:block;
	width: 80px;
	height: 80px;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	
	-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
	
	background: rgb(255,255,255);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iI2YyZjZmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(242,246,249,1) 60%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(60%,rgba(242,246,249,1)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(242,246,249,1) 60%);
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(242,246,249,1) 60%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(242,246,249,1) 60%);
	background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(242,246,249,1) 60%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f6f9',GradientType=0 );
}
.sectionIcons li .iconLabel {
	display: block;
	text-align: center;	
	padding-top: 3px;
}

.sectionIcons li .iconContainer .icon {
	width: 100%;
	height: 100%;
	display:block;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	
	-webkit-box-shadow: 0 0 1px 0 #fff;
	-moz-box-shadow: 0 0 1px 0 #fff;
	box-shadow: 0 0 1px 0 #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<div id="quickPicks">
		<ul class="sectionIcons">
			<li><a href="#"><span class="iconContainer"><span class="icon"></span></span><span class="iconLabel">Tile 1</span></a></li>
			<li><a href="#"><span class="iconContainer"><span class="icon"></span></span><span class="iconLabel">Tile 2</span></a></li>
			<li><a href="#"><span class="iconContainer" style="margin: 0px; width: 80px; height: 80px;"><span class="icon"></span></span><span class="iconLabel">Tile 3</span></a></li>
			<li><a href="#"><span class="iconContainer" style="margin: 0px; width: 80px; height: 80px;"><span class="icon"></span></span><span class="iconLabel">Tile 4</span></a></li>
			<li><a href="#"><span class="iconContainer"><span class="icon"></span></span><span class="iconLabel">Tile 5</span></a></li>
			<li><a href="#"><span class="iconContainer"><span class="icon"></span></span><span class="iconLabel">Tile 6</span></a></li>
			<li><a href="#"><span class="iconContainer"><span class="icon"></span></span><span class="iconLabel">Tile 7</span></a></li>
			<li><a href="#"><span class="iconContainer"><span class="icon"></span></span><span class="iconLabel">Tile 8</span></a></li>
			<li><a href="#"><span class="iconContainer"><span class="icon"></span></span><span class="iconLabel">Tile 9</span></a></li>
		</ul>
	</div>

点击一个图 block ，它会以一种受限的方式缩小。再次单击它，它会捕捉到左上角，因为边距已设置为 0 而不是动画设置为 0。

Answer 1

来自 Here:

Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.

margin 无法正确设置动画，请使用更具体的边距类型，例如 marginTop。

See this example