Javascript jQuery动画,如slideDown和slideUp,在浏览器中效果很好,但在手机上效果不好

Javascript jQuery动画,如slideDown和slideUp,在浏览器中效果很好,但在手机上效果不好,javascript,jquery,html,css,Javascript,Jquery,Html,Css,正如标题所说,我制作了一个网站的移动版本,并尝试使用手风琴风格和jQuery来制作元素的动画,使手风琴上下滑动,显示和隐藏内容 现在我的问题是,它在移动电话上真的是波涛汹涌的,但在个人电脑浏览器上效果很好 你对我如何提高绩效有什么建议吗 这是一把手风琴的小提琴和我如何使用它。忽略损坏的图像。我只是想知道如何提高滑动的性能,使其更平滑,但同时我希望它具有响应性,这就是为什么我不在任何地方使用任何固定宽度 这只是我如何使用它的一个例子,在我的网页中,手风琴内的文本是样式化的(如果这是可能有用的信息)

正如标题所说,我制作了一个网站的移动版本,并尝试使用手风琴风格和jQuery来制作元素的动画,使手风琴上下滑动,显示和隐藏内容

现在我的问题是,它在移动电话上真的是波涛汹涌的,但在个人电脑浏览器上效果很好

你对我如何提高绩效有什么建议吗

这是一把手风琴的小提琴和我如何使用它。忽略损坏的图像。我只是想知道如何提高滑动的性能,使其更平滑,但同时我希望它具有响应性,这就是为什么我不在任何地方使用任何固定宽度

这只是我如何使用它的一个例子,在我的网页中,手风琴内的文本是样式化的(如果这是可能有用的信息)。任何帮助都将不胜感激

HTML:

CSS:


起伏的动画可能意味着手机没有处理能力平滑渲染,或者手机上同时发生了太多其他事情。@JimGarrison我隐藏所有内容,并使其仅在单击某个内容时显示。手机版页面上的所有内容都是文本和图像。在单击之前,不会运行任何其他类型的动画,单击按钮后会隐藏和显示内容。还有手风琴。我在几部不同的手机上试过,我得到了同样的效果。。
<div id="novosti">
        <div class="accordion">
        <div class="accordion-section">
            <a class="accordion-section-title" href="#accordion-1"><img class="banner_1" src="novosti_slike_mobile/likovni_programi_za_djecu_i_mlade_najva_mob.jpg" /></a>
            <div id="accordion-1" class="accordion-section-content">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            </div><!--end .accordion-section-content-->
        </div><!--end .accordion-section-->
        <div class="accordion-section">
            <a class="accordion-section-title" href="#accordion-2"><img class="banner_1" src="novosti_slike_mobile/programi_pripreme_za_upise_najava_mob.jpg"/></a>
            <div id="accordion-2" class="accordion-section-content">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            </div><!--end .accordion-section-content-->
        </div><!--end .accordion-section-->
        <div class="accordion-section">
            <a class="accordion-section-title" href="#accordion-3"><img class="banner_1" src="novosti_slike_mobile/likovni_programi_za_odrasle_najava_mob.jpg"/></a>
            <div id="accordion-3" class="accordion-section-content">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            </div><!--end .accordion-section-content-->
        </div><!--end .accordion-section-->
        <div class="accordion-section">
            <a class="accordion-section-title" href="#accordion-4"><img class="banner_1" src="novosti_slike_mobile/uradi_sam_najava_mob.jpg"/></a>
            <div id="accordion-4" class="accordion-section-content">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            </div><!--end .accordion-section-content-->
        </div><!--end .accordion-section-->
        <div class="accordion-section">
            <a class="accordion-section-title" href="#accordion-5"><img class="banner_1" src="novosti_slike_mobile/preporucujemo_najava_mob.jpg"/></a>
            <div id="accordion-5" class="accordion-section-content">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            </div><!--end .accordion-section-content-->
        </div><!--end .accordion-section-->
        </div><!--end .accordion-->
        </div>
$(document).ready(function() {
    function close_accordion_section() {
        $('.accordion .accordion-section-title').removeClass('active');
        $('.accordion .accordion-section-content').slideUp(1000).removeClass('open');
    }

    $('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = $(this).closest('.accordion-section-title');

        if(currentAttrValue.hasClass('active')) {
            close_accordion_section();
        }else {
            close_accordion_section();

            // Add active class to section title
            currentAttrValue.addClass('active');
            // Open up the hidden content panel
            $('.accordion ' + currentAttrValue.attr('href')).slideDown(1000).addClass('open'); 
        }

        e.preventDefault();
    });
});
.accordion,
.accordion * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.accordion {
  overflow: hidden;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  /*background:#f7f7f7;*/
}


/*----- Section Titles -----*/

.accordion-section-title {
  /*width:100%;*/
  padding: 15px;
  display: inline-block;
  /*border-bottom:1px solid #1a1a1a;*/
  background-color: rgba(175, 132, 77, 0.4);
  transition: all linear 0.15s;
  text-align: center;
  /* Type */
  font-size: 12px;
  text-shadow: 0px 1px 0px #1a1a1a;
  color: #fff;
}

.accordion-section-title.active,
.accordion-section-title:hover {
  /*background:#4c4c4c;*/
  background-color: rgba(76, 76, 76, 0.4);
  /* Type */
  text-decoration: none;
}

.accordion-section:last-child .accordion-section-title {
  border-bottom: none;
}


/*----- Section Content -----*/

.accordion-section-content {
  padding: 15px;
  display: none;
  -webkit-transform: translate3d(0, 0, 0);
}

body {
    max-width:800px;
    margin:auto;
    font-family:"Alamendro",Georgia;
    font-size:100%;
    background-image:url('../novosti_slike_mobile/pozadina_mob.jpg');
    background-size: auto;
    background-position: center;
    background-attachment: fixed;
    /*background-repeat: no-repeat;*/
    background-repeat: repeat-y;
}