emile.js und xui Animation benötigt Doppelklick?

Question

Ich verwende xui und emile, um eine reduzierbare Palette zu erstellen, aber der erste Klick benötigt einen Doppelklick, dann funktionieren alle zukünftigen Klicks mit einem einzigen Klick. Ich brauche den ersten Klick um mit einem Klick zu arbeiten. Ich muss auch zuerst die Liste mit Javascript für diese Nicht-Javascript-Benutzer verstecken.

Kann jemand sehen, wo ich falsch gelaufen bin?

Hier ist, wo ich xui erweitert

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; 
     } 
    } 
}); 

Und das ist der Ruf und das Versteck der Platte

x$(window).load(function(e){ 
         emile('item', 'height:0px', {duration:-0}); 
         x$('.panel a.panelItem').click(function(e){ 
      x$().togglePanel(900,'item');}) 

     }); 

Ich habe auch versucht,

x$('#item')setStyle ('height','0px'); 

, um den Inhalt auszublenden.

Answer 1

Ich habe es. Auch ein paar tweening Funktionen aus einer Gabel von emile eingekerbt

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');  
}}); 
      } 


     } 
    }); 

Die Initialisierung

x$(window).load(function(e){ 
    x$('#item').addClass('closed');  

x$('.panel a.panelItem').click(function(e){ 
    x$('#item').togglePanel('slow','item');}) 
     }); 

und einige zusätzliche tweening Methoden von 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); 
    } 
    }; 

erweitert Noch müssen verbessere es ein wenig, aber wir kommen dorthin.