jQuery redimensionner provoque un «saut» moche lorsqu'il est déclenché

Question

J'ai utilisé le ba-resize jQuery plugin pour redimensionner dynamiquement un contenu div de site Web («# page-contenu») en fonction de la taille dynamique d'un menu de barre latérale («# menu»). Le plugin permet de relier les gestionnaires d'événements de redimensionnement aux divs.

Cela fonctionne principalement, mais lorsque les deux divs ajustent leur taille, cela provoque un saut visuel perceptible. Voir court screencast: http://recordit.co/BjIYaS36oW (pas de son)

Parfois le saut se transforme en un échec de chargement du menu complètement.

Comment réparer/éliminer cette nervosité lors du redimensionnement?

Mon 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); 
}); 

Je pense que j'ai des scripts laid ici - je ne suis pas un magicien jQuery - et j'apprécie des idées. Je peux partager une URL vers le site de mise en scène si cela aide (dans les commentaires).

Answer 1

Pour cette tâche, on utilise normalement une approche basée sur les événements. Premièrement, vous pouvez utiliser la fonction jQuery.animate, pour ajouter une durée de mouvement à votre redimensionnement css. Le «saut» est une tentative de faire le redimensionnement en un instant, de sorte que le mouvement de rupture n'est pas surprenant.

Ensuite, pour alterner entre les deux événements, une approche serait avec la fonction jQuery.one. Spécification de deux événements distincts: l'un pour la modification des propriétés de largeur du menu div, et le second pour leur suppression.

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