emile.js 和 xui 动画需要双击？答案

【问题标题】：emile.js and xui animation needing double click?emile.js 和 xui 动画需要双击？
【发布时间】：2012-04-25 04:58:06
【问题描述】：

我正在使用 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');

隐藏内容。

【问题讨论】：

标签： javascript mobile-website xui

【解决方案1】：

我明白了。还从 emile 的 fork 中删减了一些补间函数

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

仍然需要改进一点，但我们已经做到了。

【讨论】：