jQuery resize 在被触发时导致丑陋的 "jump"

Question

我用过 ba-resize jQuery plugin根据侧边栏菜单 ( '#menu' ) 的动态大小动态调整网站内容 div ( '#page-content' ) 的大小。该插件允许将调整大小事件处理程序绑定(bind)到 div。

这主要是有效的，但是当两个 div 调整它们的大小时，它会导致明显的视觉跳跃。请参阅简短的截屏视频:http://recordit.co/BjIYaS36oW (没有声音)

有时跳转会变成无法完全加载菜单。

如何修复/消除调整大小时的这种跳跃？

我的 jQuery:

// Adjusting content width to allow for responsive size with changing menu width
$(function(){
    $('#menu').resize(function(){
        $('#page-content').css({'width':(($(window).width()))-'#menu'});
        $("#page-content").css('marginLeft','');
        $("#page-content").css('marginRight','');
    });
});

$(document).ready(function(){
    var callback = function () {
         var h = $(window).width();
         var k = $('#menu').width();
         $('#page-content').width(h-k);
      };
      $(document).ready(callback);
      $(window).resize(callback);
});

我怀疑我这里有一些丑陋的脚本——我不是 jQuery 向导——我很欣赏任何想法。如果有帮助(在评论中)，我可以分享一个暂存网站的 URL。

Answer 1

对于这项任务，人们通常会使用基于事件的方法。

首先，您可以使用 jQuery.animate功能，为您的 css 调整大小添加移动持续时间。 “跳跃”是尝试立即调整大小，因此快速移动并不奇怪。

然后要在两个事件之间交替，一种方法是使用 jQuery.one功能。 指定两个单独的事件:一个用于更改菜单 div 的宽度属性，第二个用于删除这些。

  jQuery(".menu_toggle").one("click", handler1);
                function handler1() {
                    //Expand Menu
                    jQuery(".menu_toggle").one("click", handler2);
                }

                function handler2() {
                    //Collapse Menu
                    jQuery(".menu_toggle").one("click", handler1);
                }