替代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，所以我不認爲它會在任何其他手機上運行更流暢。我試過這個plugin，這解釋了'jswing'，但沒有喜悅。

所以我試着這個，而不是工作。會有人有任何意見或建議嗎？無論是爲什麼我的新功能無法使用，或者如何讓slideDown在手機上運行更流暢。

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

乾杯

Answer 1

你嘗試CSS3？

JS：

$(document).on('focus', '.ui-input-note', function() { 
    $('#btnContainer')addClass('large'); 
}); 

CSS：

#btnContainer{height:44px; display:none; transition:1s ease; -moz-transition:1s ease; -webkit-transition:1s ease; -o-transition:1s ease; -ms-transition:1s ease;} 
#btnContainer.large{display:block;height:150px;} 

希望幫助。