jQuery .animate() force le style "overflow:hidden".

Question

La méthode de jQuery .animate() force le style overflow: hidden lorsqu'il est déclenché, il perturbe mon élément animé parce que j'ai un autre élément qui est suspendu, avec une position négative, à l'extérieur de celui-ci. y a-t-il un moyen d'éviter cela ?

Answer 1

Une autre façon est de déclarer l'élément comme !important dans le css.

Par exemple.

.somediv {
  overflow: visible !important;
}

Answer 2

Voici le code source :

  if ( isElement && ( p === "height" || p === "width" ) ) {
    // Make sure that nothing sneaks out
    // Record all 3 overflow attributes because IE does not
    // change the overflow attribute when overflowX and
    // overflowY are set to the same value
    opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ];
  ...
  ...
  ...
  }

if ( opt.overflow != null ) {
  this.style.overflow = "hidden";
}

Vous pouvez commenter cela si vous voulez, ou simplement utiliser $('element').animate().css('overflow', 'visible'); comme suggéré précédemment.

La raison pour laquelle le débordement est défini comme étant caché est que les éléments situés à l'intérieur de celui qui est animé seront contenus dans l'élément pendant qu'il est animé. Par exemple, si vous réduisez la largeur d'un élément, son contenu pourrait essayer de s'allonger et de "tomber" par le bas.

Ceci est expliqué dans le code source ci-dessus par le commentaire :

// S'assurer que rien ne s'échappe

J'espère que cela vous explique tout.

Answer 3

Toutes ces solutions ont fonctionné pour moi, mais j'ai trouvé l'astuce :

$(myDiv).animate(
   { height: newHeight},
   { duration: 500, 
     queue: false, 
     easing: 'easeOutExpo', 

     step: function() {
       $(myDiv).css("overflow","visible");
     }
   }
);

Forcez le css dans chaque étape de l'animation. J'espère que cela vous aidera.

Answer 4

Vous pouvez passer :

function(e){$('#something').css('overflowY', 'scroll');}

au paramètre d'options .animate(), en tant que fonction à exécuter lorsque l'animation est "terminée", comme suit :

$('#something').animate({
                    width: '100px',
                    height: '100px',
                    overflowY: 'scroll !important' //doesn't work
                }, { duration: 500, queue: false, complete: function(e){$('#something').css('overflowY', 'scroll');} } );

Answer 5

PERFECT "Eagle" (2 Posts Up). Si je n'étais pas tombé sur votre réponse, je l'aurais cherché pendant des heures, je parie.

"Aigle" affiché la bonne façon de procéder.

Toutes les autres solutions ne sont que des bidouillages. C'était la bonne façon de faire (en répétant), c'est pourquoi ils vous donnent toutes les options lorsque vous utilisez la classe "animate".

Vous trouverez ci-dessous certains des paramètres disponibles (dans la documentation), https://api.jquery.com/animate/ ). J'avais besoin du paramètre "complete" pour effectuer une action lorsque l'animation était terminée.

    duration (default: 400)
    easing (default: swing)
    queue (default: true)
    specialEasing
    step
    progress
    complete
    start
    done
    fail
    always

Cela va rendre le travail avec les animations beaucoup plus facile et j'utiliserai ce format, qu'il soit nécessaire ou non, pour toutes les animations à l'avenir.