В данном посте я хотел бы рассмотреть проблему, с которой сам недавно столкнулся. Как сделать так, чтобы блок улетал за край экрана, затем возвращался и становился по центру?Итак, подробно опишу чего я хотел добиться. Есть у меня блок с картинкой или контентом. При клике он должен скрыться, “улететь” влево или вправо, за край экрана в общем. При этом, мне необходимо чуть позже вернуть этот блок на место, а располагался он посередине.
Для этого необходимо подключить jQuery, лучше с репозитория гугл, например, так быстрее. Допустим, у нас есть блок, расположенный по центру другого большого блока, вот код:
<style>
#central {width:1000px; background:blue; padding:50px;}
#profprog {margin:0 auto 0 auto; width:500px; height: 400px; background:red;}
</style>
<div id="central">
<div id="profprogru">тут контент</div>
</div>
Теперь напишем функцию, которая будет перемещать блок за правый край экрана:
function move(){
window_width=jQuery(window).width();
jQuery("html").css('overflow-x','hidden');
jQuery("#profprogru").animate({left,window_width},3000,function(){
jQuery("#profprogru").hide();
jQuery("html").css('overflow-x','visible');
})
}
Поясню. На второй строке мы получаем ширину окна на jQuery, используя .width(). Затем анимируем положение блока, отступ от левого края ставим равный ширине дисплея, т.е. блока видно не будет. Строка с overflow-x нужна для того, чтобы убрать горизонтальную прокрутку с помощью JQuery+css во время анимации, после скрытия уехавшего блока мы возвращаем прокрутку на место, мало ли.
Окей, уехал, скрыли его. Как вернуть блок? Да еще чтобы он был посередине? Мы знаем, что ширина блока 500 пикселей и что он должен быть по центру. Для этого мы используем следующий код:
function move_back(){
jQuery("html").css('overflow-x','hidden');
jQuery("#profprogru").show();
jQuery("#profprogru").css({'left':'auto','margin':'0 -250px 0 auto'}).animate({right:'50%'},3000,function(){
jQuery("html").css('overflow-x','visible');
})
}
Объясняю. Данная функция снова делает прокрутку влево и вправо невидимой, затем на всякий случай делаем позиционирование слева автоматическим. Ширину блока мы знаем – 500 пикселей, если не знаем, узнаем с помощью .width(), значит пополам это 250 пикселей. Именно на столько пикселей в минус необходимо сдвинуть этот блок вправо, тогда он будет по середине. Разберетесь на примере или пишите в комментах свои вопросы.
Кстати, это еще один пример, когда для решения задачи не нужно прибегать к стострочному коду, сторонним плагинам и тп, а просто необходимо включить мозги и обойтись использованием стандартных функция библиотеки jQuery.