JQuery.animate() заставляет стиль "overflow: hidden"

Ответ 1

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

Например.

.somediv {
  overflow: visible !important;
}

Ответ 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');, как было предложено ранее.

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

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

//Удостоверьтесь, что ничего не пробирается

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

Ответ 3

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

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

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

Настройте css на каждом этапе анимации. Надеюсь, что это поможет.

Ответ 4

Вы можете передать:

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

Ответ 5

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

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

Ответ 6

СОВЕРШЕННО "Орел" (2 сообщения). Если бы я не пропустил ваш ответ, я бы поискал несколько часов для этого, я уверен.

"Eagle" Написал правильный способ сделать это.

Все остальные решения - это просто хаки. Это был правильный способ (повторение), поэтому они дают вам все варианты при использовании "анимационного" класса.

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

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

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

Ответ 7

Мой предпочтительный ответ - использовать $.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