Emile.js And Xui Animation Needing Double Click?
I am using xui and emile to make a collapsible panel but the first click needs a double click then all future clicks works fine on single click. I need the first click to work on s
Solution 1:
I have got it. Also nicked a few tweening functions from a fork of emile
xui extended
xui.extend (
{
togglePanel:function(dur,thePanel)
{
if (dur === "slow"){
dur = 1500;
}
elseif (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');
}});
}
}
});
The initialisation
x$(window).load(function(e){
x$('#item').addClass('closed');
x$('.panel a.panelItem').click(function(e){
x$('#item').togglePanel('slow','item');})
});
and some extra tweening methods from https://github.com/ded/emile
functioneaseOut(pos) {
return Math.sin(pos * Math.PI / 2);
};
functioneaseOutStrong(pos) {
return (pos == 1) ? 1 : 1 - Math.pow(2, -10 * pos);
};
functioneaseIn(pos) {
return pos * pos;
};
functioneaseInStrong(pos) {
return (pos == 0) ? 0 : Math.pow(2, 10 * (pos - 1));
};
functionbounce(pos) {
if (pos < (1/2.75)) {
return (7.5625*pos*pos);
} elseif (pos < (2/2.75)) {
return (7.5625*(pos-=(1.5/2.75))*pos + .75);
} elseif (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);
}
};
Still need to improve it a bit but we are getting there.
Post a Comment for "Emile.js And Xui Animation Needing Double Click?"