jQuery .animate() wymusza styl "przepełnienie: ukryty"

Question

jQuery's .animate() wymusza styl overflow: hidden po uruchomieniu, mieszając z moim animowanym elementem, ponieważ mam inny element, który zwisa, z ujemną pozycją, poza nim. czy tak jest, aby tego uniknąć?

Answer 1

Jest to kod źródłowy:

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

można komentować tego, czy chcesz, lub po prostu użyć $('element').animate().css('overflow', 'visible'); jak sugerowano wcześniej.

Powód ustawienia przepełnienia na ukryty polega na tym, że elementy w ramach animacji będą zawarte w elemencie podczas animacji. Na przykład, jeśli zmniejszysz szerokość elementu, jego zawartość może spróbować wydłużyć i "wypaść" na dół.

Jest to wyjaśnione w kodzie źródłowym powyżej komentarza:

// Upewnij się, że nic nie wymyka się

nadzieję, że wyjaśnia to za Ciebie.

Answer 2

Innym sposobem jest zadeklarowanie elementu jako ! Important w css.

Na przykład.

.somediv { 
    overflow: visible !important; 
} 

Answer 3

można przekazać:

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

do .animate() parametr opcje, w zależności do uruchomienia gdy animacja jest 'kompletna', tak:

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

Answer 4

Każde z tych rozwiązań zadziałało, ale znalazłem podstęp:

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

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

Wymuś css na każdym etapie animacji. Mam nadzieję, że to pomoże.

Answer 5

PERFECT "Eagle" (2 posty w górę). Gdybym nie natknął się na twoją odpowiedź, szukałbym za to godzin.

"Orzeł" Wysłano prawidłowy sposób postępowania w tej sprawie.

Wszystkie inne rozwiązania są po prostu hackami. To był poprawny sposób (powtarzając), dlatego daje ci wszystkie opcje podczas korzystania z klasy "animuj". Poniżej przedstawiono niektóre z dostępnych ustawień (z dokumentacji, https://api.jquery.com/animate/). Potrzebowałem ustawienia "kompletny", aby wykonać akcję po zakończeniu animacji.

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

To będzie sprawiają, że praca z animacji znacznie łatwiejsze i będę używał tego formatu, czy nie jest to potrzebne, dla wszystkich animacji w przyszłości.

Answer 6

Moja preferowana odpowiedź to użycie $.Animation.prefilter. Here is a jsfiddle.net example.

Ustaw filtr wstępny:

jQuery.Animation.prefilter(function(element, properties, options) { 
    if (options.overrideOverflow) { 
    jQuery(element).css("overflow", options.overrideOverflow); 
    } 
}); 

następnie użyć go

$(myDiv).animate(
    { height: newHeight}, 
    { 
    duration: 500, 
    overrideOverflow: "visible" // Replace "visible" with your desired overflow value 
    } 
); 

Należy pamiętać, że nie można użyć nazwy funkcji overflow dlatego że używa jQuery wewnętrznie.

Chociaż funkcja ta była już od jakiegoś czasu w jQuery, wydaje się, że dokumentacja nie jest kompletna. Ale draft documentation is available.

zobaczyć również https://github.com/jquery/api.jquery.com/issues/256

Answer 7

Podczas korzystania $('element').animate().css('overflow', 'visible'); może powodować problemy, jeśli overflow-x i overflow-y są już określone dla danego elementu.

W tych przypadkach należy użyć parametru $('element').animate().css('overflow', '');, który usuwa atrybut przepełnienia i zachowuje nienaruszone wartości overflow-x i overflow-y.