emile.js和xui动画需要双击吗？
emile.js和xui动画需要双击吗？
提问于 2012-04-13 03:32:37
我正在使用xui和emile来制作一个可折叠的面板，但第一次点击需要双击，然后所有未来的点击都可以在一次点击上很好地工作。我需要第一次点击，以工作在一次点击。我还需要用javascript为那些非javascript用户隐藏列表。
有人能看到我哪里出错了吗？
这里是我扩展xui的地方。
xui.extend ({
togglePanel:function(dur,thePanel)
{
var panel = document.getElementById(thePanel);
var theHeight = document.getElementById(thePanel).scrollHeight;
if(panel.closed){
emile(panel, 'height:'+theHeight+'px',{duration:dur});
panel.closed = false;
}
else{
emile(panel, 'height:0px', {duration:dur});
panel.closed = true;
}
}
});这是面板的调用和隐藏
x$(window).load(function(e){
emile('item', 'height:0px', {duration:-0});
x$('.panel a.panelItem').click(function(e){
x$().togglePanel(900,'item');})
});我也试过
x$('#item')setStyle ('height','0px');来隐藏内容。
回答 1
Stack Overflow用户
发布于 2012-04-14 00:17:30
我知道了。我还从emile的fork中截取了一些补间函数
xui扩展
xui.extend (
{
togglePanel:function(dur,thePanel)
{
if (dur === "slow"){
dur = 1500;
}
else if (dur === "fast"){
dur = 500;
}
var panel = document.getElementById(thePanel);
var theHeight = document.getElementById(thePanel).scrollHeight;
if(x$(this).hasClass('closed')){
emile(panel, 'height:'+theHeight+'px',{duration:dur,easing:bounce, after: function() {
x$(panel).removeClass('closed');
}});
}
else {
emile(panel, 'height:0px', {duration:dur,easing:easeInStrong, after: function() {
x$(panel).addClass('closed');
}});
}
}
});初始化
x$(window).load(function(e){
x$('#item').addClass('closed');
x$('.panel a.panelItem').click(function(e){
x$('#item').togglePanel('slow','item');})
});和一些来自https://github.com/ded/emile的额外补间方法
function easeOut (pos) {
return Math.sin(pos * Math.PI / 2);
};
function easeOutStrong (pos) {
return (pos == 1) ? 1 : 1 - Math.pow(2, -10 * pos);
};
function easeIn (pos) {
return pos * pos;
};
function easeInStrong(pos) {
return (pos == 0) ? 0 : Math.pow(2, 10 * (pos - 1));
};
function bounce(pos) {
if (pos < (1/2.75)) {
return (7.5625*pos*pos);
} else if (pos < (2/2.75)) {
return (7.5625*(pos-=(1.5/2.75))*pos + .75);
} else if (pos < (2.5/2.75)) {
return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
} else {
return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
}
};仍然需要改进一下，但我们已经达到了目标。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10130486
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号