jQuery .animate () заставляет стиль «переполнение: скрытый»

Question

jQuery's .animate() заставляет стиль overflow: hidden при запуске, мешая моему анимированному элементу, потому что у меня есть другой элемент, который висит, с отрицательной позицией, вне его.есть ли способ избежать этого?

Answer 1

Другой способ - объявить элемент как ! Важный в CSS.

Например.

.somediv {
  overflow: visible !important;
}

Answer 2

Это исходный код:

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

Вы можете закомментировать это, если хотите, или просто использовать $('element').animate().css('overflow', 'visible');, как предлагалось ранее.

Причина, по которой переполнение установлено как скрытое, заключается в том, что элементы внутри анимируемого объекта будут содержаться внутри элемента во время его анимации. Например, если вы уменьшите ширину элемента, его содержимое может попытаться удлиниться и «выпасть» из нижней части.

Это объясняется в исходном коде выше комментарием:

// Убедитесь, что ничего не ускользает

Надеюсь, это объясняет это для вас.

Answer 3

Любое из этих решений работало для меня, но я нашел хитрость:

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

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

Формируйте CSS на каждом шаге анимации.Надеюсь, это поможет.

Answer 4

При использовании $('element').animate().css('overflow', 'visible'); это может вызвать проблемы, если для элемента уже указаны overflow-x и overflow-y.

В этих случаях используйте $('element').animate().css('overflow', '');, который просто удаляет атрибут переполнения и сохраняет overflow-x и overflow-y нетронутыми.

Answer 5

Вы можете пройти:

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

для параметра параметров .animate (), как функции, запускаемой, когда анимация завершена, например:

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

Answer 6

Мой предпочтительный ответ - использовать $.Animation.prefilter. Вот пример jsfiddle.net.

Настройка предварительного фильтра:

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

Тогда используйте его

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

Обратите внимание, что вы не можете использовать имя опции overflow, потому что jQuery использует это внутренне.

Хотя эта функция уже давно используется в jQuery, похоже, документация не полная. Но проект документации доступен .

Также см. https://github.com/jquery/api.jquery.com/issues/256

Answer 7

ИДЕАЛЬНО "Орел" (2 сообщения вверх). Если бы я не наткнулся на ваш ответ, я бы искал часы, чтобы поспорить.

"Орел" Написал правильный путь для этого.

Все остальные решения - просто взломы. Это был правильный путь (повторение), поэтому они дают вам все возможности при использовании класса «animate».

Ниже приведены некоторые доступные настройки (из документации https://api.jquery.com/animate/). Мне потребовалась настройка «завершить», чтобы выполнить действие после завершения анимации.

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

Это значительно облегчит работу с анимацией, и я буду использовать этот формат независимо от того, нужен ли он для всех анимаций в будущем.