javascript - モバイル用のjQueryのslideUpとslideDownの代替

Question

誰かが「.ui-input-note」入力ボックスをクリックすると、その下に「#btnContainer」が表示されるようにします。デスクトップで作業すると、これは完全に機能します。

HTML

        <div id="textInput"/>
        <div id="btnContainer"/>

CSS
       #btnContainer{
            height:44px;
            display: none;
        }
JS 

       $('#textInput').append(
           $('<input>').addClass('ui-input-note').attr('placeholder', 'Notes')
       );

       $('#btnContainer').append(
           $('<button id="submitBtn" data-role="button" data-inline="true" data-mini="false" data-theme="b">Save Note</button>')
       );   

        $('.ui-input-note').focus(function() {
              $( "#btnContainer" ).slideDown({
                     duration: 500 ,
                     easing: 'jswing'
              });
        });

しかし、モバイルでは、slideDown は遅くて不安定です。私は HTC One を使用しているので、他の電話でよりスムーズに動作するとは思いません。「jswing」を説明するこのプラグインを試しましたが、喜びはありません。

だから私は代わりにこれを試していますが、うまくいきません。誰かアドバイスや提案はありますか？新しい関数が機能しない理由、またはモバイルで SlideDown をよりスムーズに実行する方法のいずれかです。

        $('.ui-input-note').focus(function() {
                $( "#btnContainer" ).animate({
                     display: 'block',
                     left:'250px',
                     opacity:'0.5',
                     height:'150px',
                     width:'150px'
                 });
         }); 

乾杯