Skip to content Skip to sidebar Skip to footer

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?"