emile.js и xui анимация требуется двойной щелчок?

Question

Я использую 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'); 

, чтобы скрыть содержимое.

Answer 1

У меня есть это. Также порезал несколько функций Tweening от развилки Эмиля

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

и некоторые дополнительные методы Tweening от 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); 
    } 
    }; 

Все еще нужно немного улучши его, но мы добираемся туда.