Javascript 使用jQuery slideUp、slideDown和切换功能降低移动性能

我写了一个小册子页面，在移动视图中，我希望有一些容器可以通过jQuery的slideDown/Up/toggle机制进行扩展，以便在用户单击相应区域时显示更多细节

简单介绍一下我的意思，下面是JS代码，我没有将HTML和CSS包括在小提琴中，因为它相当长：

$('document').ready(function(){

    //mobile open
    $('#mob-one-show, #mob-two-show, #mob-three-show, #mob-four-show').click(function(){
        var arr = $(this).attr('id').split('-');
        var txt = "#"+arr[0]+"-"+arr[1]+"-text";
        $(this).toggle('slide', function(){
            $(txt).slideDown();
        });
    });

    //mobile close
    $('#close-one, #close-two, #close-three, #close-four').click(function(){
        var arr = $(this).attr('id').split('-');
        var txt = "#mob-"+arr[1]+"-text";
        var show = "#mob-"+arr[1]+"-show";
        $(txt).slideUp('slow');
        $(show).slideDown('slow');
    });

});

这正是我使用的样式和布局，BS3作为框架，jQuery1.11.2

然而，在一些设备中，比如我自己的三星Galaxy S6，slideUp和slideDown动画非常滞后。Google Fu的一点建议可能是因为它在手机上迭代类，所以我在可能的情况下转向了IDs，但没有任何改进

---

有人知道为什么动画会这么尴尬吗？顺便说一句，在我的手机上，JSFIDLE上的动画仍然有点滞后，尽管代码基本相同，但它的性能比live站点要好。

我建议您尝试使用CSS动画，而不是jquery.slideUp和.slideDown。。。只需使用jquery添加和删除类。。。这应该会提高性能。css动画对手机的友好程度如何？我以前在web上使用过它们，但我仍然担心，不是所有的浏览器都支持它们，为了具有兼容性和优雅的回退，我不得不跳过很多障碍。你应该阅读这篇关于它的非常有趣的文章，我想在那之后你会知道更多：我尝试了CSS3转换，甚至在强迫3D翻译以鼓励浏览器使用GPU加速方面使用了一些欺骗手段，但似乎G6上的Chrome虽然有了一些小的改进，但至少是滞后的。在iPhone5c和6上运行良好。