Div是一个整体的动画，而不是单独的
Div是一个整体的动画，而不是单独的
提问于 2014-11-22 05:15:38
我正在尝试在我的网站上制作一个类似动画的材料设计。正如你所看到的，当我按下按钮时，它们中的每一个都是动画，而不是只动画我按下的那个。编辑:在我制作了gif之后，我设法在它们上面得到了一个平滑的动画，但它们仍然是一个整体。http://oi59.tinypic.com/29ek9wx.jpg，这是我得到的动画。下面是我的查询代码：
$(document).ready(function() {
var toggleState = true;
$('.show').on("click", function() {
if(toggleState) {
$(this).find('svg').each(function(){
$(this).css({
transform: "rotate(180deg)"
});
});
$(document).find('.box').each(function(){
$(this).css({
height: "+=200"
},1000);
});
} else {
$(this).find('svg').each(function(){
$(this).animate({
transform: "rotate(+=180deg)",
});
});
$(document).find('.box').each(function(){
$(this).css({
height: "240" // this is the default height
},1000);
});
}
toggleState = !toggleState;
});
});
// .show is the container of the svg(the arrow). .box is the container of the whole thingPS:在制作了.gif之后，我设法得到了一个流畅的动画，唯一的问题是他们合二为一。PS2:不要在意光标。
更多的代码。
<div class="fluid-layout">
<article class="box-wrapper">
<section class="box">
<div class="main-color" id="red">
</div>
<div class="show">
<svg class="svg" xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
<path d="M18 12l-9 9 2.12 2.12 6.88-6.88 6.88 6.88 2.12-2.12z"/>
<path d="M0 0h36v36h-36z" fill="none"/>
</svg>
</div>
</section
><section class="box">
<div class="main-color" id="pink">
</div>
<div class="show">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
<path d="M18 12l-9 9 2.12 2.12 6.88-6.88 6.88 6.88 2.12-2.12z"/>
<path d="M0 0h36v36h-36z" fill="none"/>
</svg>
</div>
</section
><section class="box">
<div class="main-color" id="purple">
</div>
<div class="show">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
<path d="M18 12l-9 9 2.12 2.12 6.88-6.88 6.88 6.88 2.12-2.12z"/>
<path d="M0 0h36v36h-36z" fill="none"/>
</svg>
</div>
</section
>
</article>
</div>回答 1
Stack Overflow用户
发布于 2014-11-22 05:26:12
我认为问题源于这里的代码。
$(document).find('.box').each(function(){
$(this).css({
height: "240" // this is the default height
},1000);和
$(document).find('.box').each(function(){
$(this).css({
height: "+=200"
},1000);
});您将在文档中搜索box类，并同时将css应用于所有这些box。如果我知道你那些盒子的html结构，我可以帮你解决这个问题。
有关closest()的文档，请参阅http://api.jquery.com/closest/
编辑：
替换
$(document).find('.box').each(function(){使用
$(this).closest('.color-group').each(function(){将会帮助并解决这个特定的问题。请参阅http://jsfiddle.net/FERMIS/5dLyqsyu/3/
然而，盒子现在会奇怪地移动。要解决这个问题，你需要做一些CSS工作。
删除
display: table-cell;从…
.fluid-layout .color-group .main-color span {然后添加一个新的CSS块，以使通过删除前一行CSS而弄乱的文本重新居中
.main-color span{
display:block;
line-height: 5em;
}http://jsfiddle.net/FERMIS/5dLyqsyu/4/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27070478
复制相关文章
相似问题
腾讯云开发者
