jQueryUI显示/隐藏子节点的动画问题
我遇到了jQueryUI的show()/ hide()函数的问题。他们基本上停用了我的CSS在动画期间。jQueryUI显示/隐藏子节点的动画问题
的jsfiddle链接:http://jsfiddle.net/UBATE/1/
根据API:
http://docs.jquery.com/UI/Effects/Drop,
我已经建立了以下功能:
updateTeamLists = function(args) {
// fade out -> rebuild the content -> fade in
$("#team1, #team2").hide("drop", {"direction": "right"}, 600, function() {
rebuildTeamLists(args);
$(this).show("drop", {"direction": "right"}, 600);
});
};
孩子DOM节点似乎失去一切他们的CSS属性在动画的开始,即他们停止浮动(或失去他们的内联块显示)他们的背景瞬间消失。然而,动画和淡出的文字工作正常。
HTML DOM结构:
<div id="teams">
<div id="team1">
<ul>
<li>Player 1</li>
<li>Player 2</li>
<li>Player 3</li>
<li>Player 4</li>
<li>0 Pts</li>
</ul>
</div>
<div id="team2">
<ul>
<li>Player 5</li>
<li>Player 6</li>
<li>Player 7</li>
<li>Player 8</li>
<li>0 Pts</li>
</ul>
</div>
</div>
CSS:
#content > #teams {
margin-top: 10px;
padding: 5px 5px 5px 22px;
width: 650px;
border: 2px solid #bfbfbf;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-sizing: border-box;
-moz-box-sizing:border-box;
}
#content > #teams > div {
margin-top: 5px;
display: block;
height: 28px;
}
#content > #teams > div:first-child {
opacity: 1.0;
}
#content > #teams > div:last-child {
opacity: 0.6;
}
#content > #teams > div > ul > li {
height: 25px;
width: 125px;
border-width: 1px;
border-style: solid;
margin-left: 5px;
display: inline-block;
}
#content > #teams > div > ul > li:first-child {
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
#content > #teams > div > ul > li:last-child {
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
width: 50px !important;
}
#content > #teams > #team1 > ul > li {
background: rgb(229,130,130); /* Old browsers */
background: -moz-linear-gradient(top, rgb(229,130,130) 0%, rgb(216,43,43) 51%, rgb(232,153,153) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(229,130,130)), color-stop(51%,rgb(216,43,43)), color-stop(100%,rgb(232,153,153))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* IE10+ */
background: linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* W3C */
border-color: rgb(229,130,130);
text-align: center;
padding-top:3px;
}
#content > #teams > #team2 > ul > li {
background: #b3dced; /* Old browsers */
background: -moz-linear-gradient(top, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* IE10+ */
background: linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* W3C */
border-color: rgb(179,220,237);
text-align: center;
padding-top:3px;
}
可惜我不能在网上托管代码,所以我贴上去的东西我得到了一个演示。我使用Google Chrome 17.0.963.56和Firefox 10.0.2。
我经常在将jQueryUI效果添加到我的脚本时遇到问题,最终没有添加它们。虽然可能会有一些技巧/错误阻止其正常工作(例如,如果您的DOM节点没有类属性,那么toggleClass动画将不起作用)。
我错过了什么吗?一个解决方法如何看起来像,我必须遍历所有的子节点?
在此先感谢!
哈尔蒂
jQuery用户界面将受影响的元素下添加一个额外股利。例如:
<div id="team1">
<ul>
...
<ul>
</div>
当效果被施加,该结构将是:
<div id="team1">
<div class="jquery-ui something-else">
<ul>
...
</ul>
</div>
</div>
的解决方案是不使用直接子选择“>”。见示例here。您可以将它与您的版本进行比较:)
谢谢,这会对当下有所帮助。您的解决方案存在一个小偏移问题,但可以通过编辑“#content> #teams div”行来解决。但是,当我将其更改为“#content> #teams#team1,#content> #teams#team2”时,页边距将消失。我不是新来的CSS,但仍然非常困惑... 另外我恐怕我不知何故覆盖你的有用的小提琴。你可以在下面找到它:http://jsfiddle.net/UBATE/12/ 这就是我在说的:http:// jsfiddle。net/3NHSR/ – Harti 2012-03-01 07:21:16
我认为这是因为你错误地添加了逗号:)'#teams#team1, #teams#team2,{' – rhgb 2012-03-01 12:11:01
编写css时,Firebug或chrome的开发工具可能非常有用 – rhgb 2012-03-01 12:14:35
您可以在http://jsfiddle.net/上创建示例吗? – 2012-02-29 20:20:26
你去那里了:http://jsfiddle.net/UBATE/1/ – Harti 2012-02-29 20:29:24