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>

单击一个图块，它会以受约束的方式缩小。再次单击它会捕捉到左上角，因为边距已设置为0而不是设置为0。

Answer 1

来自 Here:

不支持简写CSS属性（例如margin，background，border）。例如，如果要检索渲染的边距，请使用：$(elem).css('marginTop')和$(elem).css('marginRight')，依此类推。

margin无法正常制作动画，请使用更具体的保证金类型，例如marginTop。

<强> See this example

Answer 2

单击磁贴后，您将删除'small'类，因此使用CSS将边距设置为0。尝试

icon.stop(true).animate({margin: 0, width: 80, height: 80},2000, function() {
    $(this).removeClass("small");
});

将在动画结束后删除该类。

您也需要对初始动画执行相同的操作，因为某些浏览器（例如Opera）会在收缩时将磁贴固定在顶部。

保证金不会动画回0？

2 个答案: