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

我已經明白了。此外缺口幾個漸變功能從埃米爾的叉

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

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

還有一些額外的補間方法需要改善一點，但我們到達那裏。