Как создать контента плавный переход

Question

Я 2 DIV, div1 фактически показывает, когда страница загружается, div2 нет, когда пользователь щелкает LINK1 мне нужно иметь плавный переход между div1 к div2.

Я искал и нашел некоторые обходные пути с jquery и другими библиотеками, но я просто не могу сделать это правильно. Если бы кто-то мог мне помочь, это было бы здорово.

Answer 1

Используйте CSS3 переходы на свойства, которые будут вызывать аппаратное ускорение в браузерах т.е. свойству CSS непрозрачности

transition:opacity 1s ease; 

Чтобы вызвать tranisiton просто добавить класс скрыть в Div1 через JS, который устанавливает непрозрачность до нуля

.hide{opacity:0;visibility:hidden;} 

Vanilla JS версия здесь http://jsfiddle.net/sjmcpherso/L3fg08zp/

с JQuery, чтобы переключить класс, который вы могли бы использовать:

$('#change').on('click',function(){ 
    $("#div1").toggleClass('hide'); 
}); 

Answer 2

Вы можете взглянуть на jQuery.fadeIn и jQuery.fadeOut. См. Раздел «Демо» на странице для демонстрации.