JQuery 动画运行不流畅，滚动条闪烁很多，DIV 动画化

Posted 2023-05-08

【中文标题】JQuery 动画运行不流畅，滚动条闪烁很多，DIV 动画化

【英文标题】：JQuery animation does not run smoothely, lots of flicker in scrollbar and DIV's being animated

【发布时间】：2011-07-28 06:10:57

【问题描述】：

我在一个页面上有几个 DIV，只有一个是打开的，其他的是关闭​​的，我希望在单击一个关闭的 DIV 时它会打开，并且之前打开的 DIV 会关闭，如果有的话。一切正常，但问题是：滚动条和动画 DIV 中有很多闪烁。

如何消除这种闪烁？

请建议？

$(function () 
            $(".OpenedIdea").find("img").first().click(CollapseFunction);
            $(".ClosedIdea").find("img").first().click(ExpandFunction);
        );

        function CollapseFunction() 
            $(this).attr("src", srcE);
            $(this).unbind("click");
            $(this).click(ExpandFunction);

            $(this).parents("div.OpenedIdea").first().removeClass("OpenedIdea").
addClass("ClosedIdea");

            var ideaDiv = $(this).parents("div").first().next();
            ideaDiv.toggle("blind", 300, function () 
                $("html,body").animate( scrollTop: ideaDiv.offset().top - 100 ,
                 duration: 'slow', easing: 'swing' );
            );

        

        function ExpandFunction() 
            $(this).attr("src", srcC);
            $(this).unbind("click");
            $(this).click(CollapseFunction);

            $(".OpenedIdea").find("img").first().click();
            $(this).parents("div.ClosedIdea").first().removeClass("ClosedIdea").
addClass("OpenedIdea");

            var ideaDiv = $(this).parents("div").first().next();
            ideaDiv.toggle("blind", 300, function () 
                $("html,body").animate( scrollTop: ideaDiv.offset().top - 100 ,
                 duration: 'slow', easing: 'swing' );
            );

【参考方案1】：

如果没有示例或您的 HTML，这有点难以理解，但您似乎想要的是 jQuery UI accordion。如果您坚持自己做，我建议您使用单击处理程序遵循这种方法。

<div>
   <span class="opener opened">&nbsp;</a>
   <div class="opened idea">
   </div>
   <span class="opener">&nbsp;</a>
   <div class="idea">
   </div>
</div>

<script type="text/javascript">
   $(function() 
         // hide all but the opened div
         $('div.idea').hide().filter('.open').show();

         // handle open
         $('.opener').click( function() 
               var $opener = $(this);
               var $next = $(this).next('div.idea');

               // if opener for a closed div is clicked
               if (!$next.hasClass('opened')) 
                  // close the open div
                  $('div.opened').toggle('blind',300,function() 
                       // change it's opener to be "closed" and mark the div as closed
                       $('span.opened').removeClass('opened');
                       $(this).removeClass('opened');

                       // open the div following the clicked opener 
                       $next.addClass('opened').toggle('blind',300, function() 
                            // mark it's opener as "opened"
                            $(this).prev('a.opener').addClass('opened');
                       );
                  );
               
         );
    );
</script>

然后使用一点 CSS 来处理开启器/关闭器的视觉样式

a.opener

    background: url('images/closed.png') no-repeat;
    width: 20px; // or the width of your image
    height: 20px; // or the height of your image


a.opened

    background: url('images/opened.png') no-repeat;