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



Answers

C'est 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 ceci si vous voulez, ou simplement utiliser $('element').animate().css('overflow', 'visible'); comme précédemment suggéré.

La raison pour laquelle le débordement est masqué est que les éléments 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 risque de s'allonger et de "tomber" par le bas.

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

// Assurez-vous que rien ne se faufile

J'espère que cela l'explique pour vous.

Question

Le .animate() de jQuery force le overflow: hidden style overflow: hidden lorsqu'il est déclenché, jouant avec mon élément animé parce que j'ai un autre élément qui est suspendu, avec une position négative, en dehors de celui-ci. est-il de toute façon éviter cela?




PARFAIT "Eagle" (2 messages vers le haut). Si je n'ai pas rencontré votre réponse, j'aurais cherché des heures pour ce pari.

"Eagle" Posté la bonne façon de faire à ce sujet.

Toutes les autres solutions ne sont que des hacks. C'était la manière correcte (réitérer), c'est pourquoi ils vous donnent toutes les options en utilisant la classe "animate".

Voici quelques-uns des paramètres disponibles (dans la documentation, https://api.jquery.com/animate/ ). J'avais besoin du réglage "complet" 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 rendra le travail avec les animations beaucoup plus facile et j'utiliserai ce format, qu'il soit nécessaire ou non, pour toutes les animations à venir.




Tu peux passer :

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

au paramètre options .animate (), en tant que fonction à exécuter lorsque l'animation est 'complete', comme ceci:

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



Links



Tags

jquery jquery   css css