Анимация окна fancybox с помощью animate.css

Идин из самых распространенных jquery плагинов модальных окон - это fancybox. Популярность плагина обусловлена наличием подробной документацией, множеством возможностей, богатым API. 

Для заказов потребовалось изменить анимацию открытия и закрытия окна. Большой выбор анимаций есть в animate.css. Именно animate.css мы будем использовать для анимации окна fancybox.

Используются 2 метода API: afterLoad - событие перед появлением окна и beforeClose - событие перед закрытием страницы. 

Решение:

Используя afterLoad и beforeClose необходимо вешать классы анимации на обертку fancybox: 

$('.modal').on('click',function(){

	$.fancybox({
		type : 'inline',
		href : '.fancy',
		padding : 0,
		scrolling : 'visible',
		afterLoad : function(){
			$(".fancybox-skin").addClass('fadeInDown animated');
		},
		beforeClose : function(){
			$(".fancybox-skin").addClass('fadeOutDown animated');
		}
	});

});