JQuery 动画运行不流畅，滚动条和 DIV 动画出现大量闪烁

Question

我在一个页面上有多个DIV，只有一个打开，其他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' });
            });

Answer 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;
}