CODEWITHSUNDEEP
javascriptjquery
Chris Spittles
Chris Spittles

Reputation: 15369

margin won't animate back to 0?

I'm trying to animate a button's size while constraining its position. It animates to its small size perfectly.

But animating to its larger size doesn't work as the margin is immediately set to 0px and as a result not animated.

Here is the example:

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>

Click a tile and it shrinks in a constrained manner. Click it again and it snaps to the top left because the margin has been set to 0 instead of animated to 0.

Upvotes: 2

Views: 188

Answers (2)

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175088

From 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 cannot be animated properly, use a more specific type of margin, such as marginTop.

See this example

Upvotes: 3

Grim...
Grim...

Reputation: 16953

You're removing the 'small' class as soon as the tile is clicked, thus setting the margin to 0 with CSS. Try

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

which will remove the class once the animation has finished.

You need to do the same with the initial animation too, as some browsers (Opera, for example) will stick the tile to the top as it shrinks.

Upvotes: 0

Related Questions