jQuery slideUp和slideDown移动版的替代品

debugcn 发表于 Dev

达夫特

当有人单击“ .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'
                 });
         });

干杯

吉维

您尝试过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;}

希望能有所帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。