Анимировать скрытие элементов на боковой панели с помощью jQuery

Question

У меня есть боковая панель на моей странице. Когда пользователь изменяет размер браузера, элементы отображаются только в том случае, если они не вырезаны (в нижней части окна). Он работает так, как вы можете видеть на jsFiddle.

http://jsfiddle.net/MJ9VC/23/

Для теста: изменить размер браузера (убедитесь, высота окна меньше). Вы увидите, что некоторые предметы скрываются. Измените размер браузера (увеличьте высоту окна). Вы увидите некоторые элементы.

Проблема: Я преуспеваем делать анимацию из не показал к показал (плавно, показывая детали), но я не смог делать анимацию из показал к не показал.

Я не знаю, ясно ли я?

Answer 1

Вот ваше решение:

if (y <= itemBottom) { 
    if(!that.hasClass('hidden') && !that.is(':animated')){ 
     that.removeClass('visible').addClass('hidden','slow'); 
    } 
} 
else{ 
    if(that.hasClass('hidden') && !that.is(':animated')){ 
     that.addClass('visible','slow').removeClass('hidden'); 
    } 
} 

Порядок добавления/удаления скрытых/видимый важно. Вы также не хотите, чтобы возиться с ним, пока он выцветанию в/из, и вы также должны JQuery UI, чтобы анимировать добавление класса:

Демо: http://jsfiddle.net/AlienWebguy/jrvsB/

Answer 2

Я считаю, что проблема исходит от настройки видимости для скрытой

that.css('visibility','hidden'); 

Как только вы делаете, что она исчезнет, ​​независимо от непрозрачности вы устанавливаете.

Можете ли вы пропустить весь атрибут видимости и просто использовать непрозрачность? Поэтому, когда браузер получает малый вы делаете:

that.animate({ 'opacity': 0 });