2
버튼의 크기를 지정하면서 애니메이션의 크기를 조정하려고합니다. 그것의 작은 크기로 완벽하게 움직입니다.여백이 다시 0으로 애니메이션 적용되지 않습니까?
그러나 마진이 즉시 0px으로 설정되고 결과적으로 애니메이션이 적용되지 않으므로 더 큰 크기로 애니메이션을 적용하면 작동하지 않습니다.
jQuery(document).ready(function(){
\t
\t \t quickPickSelection();
\t \t
\t });
\t
\t function quickPickSelection() {
\t \t var sectionIcons = jQuery("#quickPicks ul.sectionIcons li a");
\t \t
\t \t sectionIcons.click(function(){
\t \t \t \t \t
\t \t \t var icon = jQuery(this).children("span.iconContainer");
\t \t \t
\t \t \t if (!icon.hasClass("small")){
\t \t \t
\t \t \t \t icon.stop(true).animate({margin: 20, width: 40, height: 40},200).addClass("small");
\t \t \t
\t \t \t } else {
\t \t \t \t
\t \t \t \t icon.stop(true).animate({margin: 0, width: 80, height: 80},2000).removeClass("small");
\t \t \t \t \t
\t \t \t }
\t \t \t
\t \t \t return false;
\t \t });
\t }#quickPicks {
\t
\t float: left;
\t width: 930px;
}
.sectionIcons {
\t list-style: none;
\t margin: 0 auto;
\t width: 810px;
\t padding: 10px;
\t overflow: hidden;
}
.sectionIcons li {
\t padding: 0;
\t margin: 0;
\t float: left;
\t margin: 0 10px 0 0;
\t width: 80px;
}
.sectionIcons li .iconContainer {
\t border: solid 1px #d8eaf0;
\t margin: auto;
\t display:block;
\t width: 80px;
\t height: 80px;
\t -webkit-border-radius: 4px;
\t -moz-border-radius: 4px;
\t border-radius: 4px;
\t
\t -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
\t -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
\t box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
\t
\t background: rgb(255,255,255);
\t background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iI2YyZjZmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
\t background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(242,246,249,1) 60%);
\t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(60%,rgba(242,246,249,1)));
\t background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(242,246,249,1) 60%);
\t background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(242,246,249,1) 60%);
\t background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(242,246,249,1) 60%);
\t background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(242,246,249,1) 60%);
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f6f9',GradientType=0);
}
.sectionIcons li .iconLabel {
\t display: block;
\t text-align: center; \t
\t padding-top: 3px;
}
.sectionIcons li .iconContainer .icon {
\t width: 100%;
\t height: 100%;
\t display:block;
\t
\t -webkit-border-radius: 4px;
\t -moz-border-radius: 4px;
\t border-radius: 4px;
\t
\t -webkit-box-shadow: 0 0 1px 0 #fff;
\t -moz-box-shadow: 0 0 1px 0 #fff;
\t 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">
\t \t <ul class="sectionIcons">
\t \t \t <li><a href="#"><span class="iconContainer"><span class="icon"></span></span><span class="iconLabel">Tile 1</span></a></li>
\t \t \t <li><a href="#"><span class="iconContainer"><span class="icon"></span></span><span class="iconLabel">Tile 2</span></a></li>
\t \t \t <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>
\t \t \t <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>
\t \t \t <li><a href="#"><span class="iconContainer"><span class="icon"></span></span><span class="iconLabel">Tile 5</span></a></li>
\t \t \t <li><a href="#"><span class="iconContainer"><span class="icon"></span></span><span class="iconLabel">Tile 6</span></a></li>
\t \t \t <li><a href="#"><span class="iconContainer"><span class="icon"></span></span><span class="iconLabel">Tile 7</span></a></li>
\t \t \t <li><a href="#"><span class="iconContainer"><span class="icon"></span></span><span class="iconLabel">Tile 8</span></a></li>
\t \t \t <li><a href="#"><span class="iconContainer"><span class="icon"></span></span><span class="iconLabel">Tile 9</span></a></li>
\t \t </ul>
\t </div>이 타일을 클릭하고 제한된 방식으로 축소 : 여기
은 예입니다. 다시 클릭하면 0으로 애니메이션 대신 여백이 0으로 설정되어 있기 때문에 왼쪽 상단으로 스냅합니다.
작품. 어떤 브라우저를 사용합니까? – OptimusCrime
'shrinking'이 Opera에서 제대로 작동하지 않는다는 것을 발견했습니다. –
게시물에 서명하지 마십시오. –