Движение блоков JQuery

Добрый выходной, уважаемые читатели, новички в веб программировании и просто программисты! Решил сегодня поделиться одной простой темой, но вполне интересной для новичков, а возможно просто кто то задумается применить движение блоков JQuery у себя на сайте. В принципе, как я уже упомянул выше, ничего сложного нет, но просто сам принцип перемещения блоков мне пришелся по вкусу и уже нашел место для его применения. 

Сразу же переходим к подключению библиотеки JQuery, стилей CSS, а также, собственно, самого скрипта movedivjquery.js. 

<link type="text/css" rel="stylesheet" href="css/demo.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script src="js/movedivjquery.js"></script>

Перед тем как приступить к рассмотрению кода JQuery, нам нужно создать блок, который мы сможем перемещать по области браузера. Для этого создаем контейнер с идентификатором block. Больше, в принципе, кроме как заполнить информацией, ничего делать тут не нужно!

<div id="block">
Любая текстовая, графическая информация...
</div>

Теперь переходим к кнопкам, с помощью которых, мы сможем управлять самим блоком. Создаем контейнер для кнопок, чтобы придать стилизацию с помощью стилей CSS. Назовем его идентификатором nav, - навигация. В него поместим четыре наших кнопки: вверх, влево, вправо и вниз. Каждой придадим отдельный класс, соответствующий, положению кнопки и ее названию: вверх - up, влево - left, вправо - right, вниз - down.

<div class="nav"> 
    <span class="left">Влево</span> 
    <span class="up">Вверх</span>
    <span class="right">Вправо</span> 
    <span class="down">Вниз</span> 
</div>

Вот мы и подошли к самому главному, а это пожалуй JQuery код, который мы сейчас подробно рассмотрим. Создаем мы документ, в котором прописываем обычное обращение с помощью функции. Я не буду разбирать каждый элемент, а пожалуй остановимся только на первом.

Прописываем классу left функцию клика, после которого мы можем с блоком идентификатора block выполнять любую анимацию, так как мы именно указали, что с этим блоком будет выполнять функцию animate - анимацию, а в данном случае мы просто будем при каждом клике, двигать блок влево на 10 пикселей. В принципе, мы можем и добавить другие свойства, к примеру при клике уменьшать прозрачность, или чтобы блок вел себя как то не стандартно, к примеру, дергался. Ну это уже такие тонкости, которые по сути нужно решать именно Вам!

$(document).ready(function() {
    $('.left').click(function() {
        $('#block').animate({
        'marginLeft' : "-=10px" 
        });
    });
    $('.right').click(function() {
        $('#block').animate({
        'marginLeft' : "+=10px" 
        });
    });
    $('.down').click(function() {
        $('#block').animate({
        'marginTop' : "+=10px" 
        });
    });
    $('.up').click(function() {
        $('#block').animate({
        'marginTop' : "-=10px" 
        });
    });
});

Переходим к стилям, и тут  хочу отметить, что по сути их я прописывал только для придания какой то упорядоченной стилизации, а по сути они не обязательны. 

.nav{
	width: 500px;
	height: 170px;
	margin-left: 100px;
}

.left, .right, .down, .up{
	border-radius: 100%;
	border: 1px solid #494949;
	padding: 20px;
	cursor: pointer;
}

.left:hover, .right:hover, .down:hover, .up:hover{
	background: #000000;
	color: #ffffff;
}

.left{
	margin-right: 50px;
	display: inline-table;
}

.right{
	margin-left: 50px;
	display: inline-table;
}

.up{
	display: inline-table;
	position: relative;
}

.down{
	margin-left: 145px;
	margin-top: 10px;
	display: inline-table;
}

#block{
	background: #f2f2f2;
	position:absolute;
	padding:20px;
	width:500px;
	border: 1px solid #c2c2c2;
	border-radius: 20px;
}

#block img{
	width: 160px;
	float: left;
}

#block div{
	width: 300px;
	float: right;
	text-shadow: 0px 0.7px;
}

#block span{
	font-size: 30px;
	color: #7f7f7f;
}

.ps {
	padding-top: 10px;
	text-align: right;
}

Буду рад, кому помог данный материал, до следующих материалов! Рад всем кто читает!