埃米尔.js和徐动画需要双击
emile.js and xui animation needing double click?
我正在使用 xui 和 emile 制作可折叠面板,但第一次单击需要双击,然后所有未来的单击都可以正常工作。我需要第一次单击才能单击。我还需要最初为那些非javascript用户隐藏带有javascript的列表。
谁能看出我哪里出错了?
这是我扩展徐
的地方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');
以隐藏内容。
我知道了。还从埃米尔的叉子上切下了一些补间功能
徐扩展
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);
}
};
仍然需要改进它,但我们正在到达那里。
相关文章:
- 使用类从一个标记中双击事件
- onclick函数需要双击,因为类分配延迟
- 了解双击代码标记
- jquery Onclick函数带有导致双击的回调排序函数
- 防止双击执行两次jQuery post请求
- JavaScript双击事件
- 选择“字符串”并使用SeleniumJava双击
- jQuery UI自动完成需要在iOS上双击
- 使用jquery在html中添加双击操作
- 双击泛光灯单击
- 如何在Firefox中禁用视频的单击和双击控件
- 调用函数和单击动画
- 双击可更改树标签
- svg.js/svg平移缩放-双击交互
- 操作方法:第一次单击动画 1,第二次单击动画 2
- 在WordSmith jquery中,双击后什么决定了链接图标的位置
- 宣传单:双击时不要触发点击事件函数
- 开始按钮用于启用和恢复动画,而无需在双击时再次重复该功能(javascript)
- 动画在双击而不是单击时工作
- 埃米尔.js和徐动画需要双击