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

【问题标题】：JQuery animation does not run smoothely, lots of flicker in scrollbar and DIV's being animatedJQuery 动画运行不流畅，滚动条闪烁很多，DIV 动画化
【发布时间】：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' });
            });

【问题讨论】：

标签： jquery jquery-ui jquery-animate

【解决方案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;
}

【讨论】：