jQuery slideUp 和 slideDown for Mobile 的替代方案

Alternatives to jQuery slideUp and slideDown for Mobile

本文关键字：方案 Mobile for slideUp slideDown jQuery      更新时间：2023-09-26

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

但在移动设备上，滑行缓慢且跳跃。我使用的是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;}

希望有帮助。

相关文章：