jQuery 调整大小会导致丑陋 "jump" 被解雇

Question

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

这主要是有效的，但是当两个 div 调整它们的大小时，它会导致明显的视觉跳跃。查看简短的截屏视频：http://recordit.co/BjIYaS36oW（无声音）

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

如何 fix/eliminate 调整大小时的这种跳跃性？

我的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 调整大小添加移动持续时间。 'jump' 是一次尝试调整大小的尝试，因此快速移动并不奇怪。

然后要在两个事件之间交替，一种方法是使用 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);
                }

jQuery 调整大小会导致丑陋 "jump" 被解雇

jQuery resize causes ugly "jump" when fired

jquery

html

jquery-plugins

web-frontend

responsiveness