Javascript-форум - Отменить действие функции по нажатию

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Отменить действие функции по нажатию (https://javascript.ru/forum/jquery/65428-otmenit-dejjstvie-funkcii-po-nazhatiyu.html)

Отменить действие функции по нажатию

День добрый уважаемые. Подскажите пожалуйста, есть ли возможность отменить(обнулить/сбросить) действие функции если она уже была запущена ? Пример

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

	<style type="text/css">
		#field {
			position: relative;
			width: 300px;
			height: 300px;
			background-color: red;
		}

		.square {
			position: absolute;
			width: 50px;
			height: 50px;
			background-color: black;
			border: 1px solid white;
			color: white;
			font-size: 1.5em;
			text-align: center;
			cursor: pointer;
		}

		.square:nth-child(1) {
			top: 10%;
			left: 20%;
		} 

		.square:nth-child(2) {
			top: 40%;
			left: 20%;
		}
		.square:nth-child(3) {
			top: 60%;
			left: 20%;
		}
		.square:nth-child(4) {
			top: 80%;
			left: 20%;
		}
		#bottom{
			width: 300px;
			height: 100%;
			background-color: green;
			cursor: pointer;
			font-size: 1.5em;
			color: white;
		}
	</style>

	<script type="text/javascript">
		window.onload = function() {

$(function() { 


	// alert('vse ok');

	$('#field').on('click', 'div', function() {

		move();

	});


	$('#button').on('click', function() {

		// сюда надо что-то написать ? =)
	})
});


 function move () {

 	var newDiv = $('#field > div');

 		newDiv.eq(0).css({'top':'5%',
                          'left':'41%'});

        newDiv.eq(1).css({'top':'15%',
                          'left':'57%'});

        newDiv.eq(2).css({'top':'65%',
                          'left':'57%'});

        newDiv.eq(3).css({'top':'65%',
                          'left':'25%'});
 }


}


	</script>
</head>
<body>
	<div id="field">
		<div class="square">1</div>
		<div class="square">2</div>
		<div class="square">3</div>
		<div class="square">4</div>
	</div>
	
	<div id="button">Clear function</div>


	<!-- <script type="text/javascript" src="javascript.js">
		
	</script> -->
</body>
</html>

По нажатию на один из дивов им присваивается значения функция move(); Как по нажатию на элемент #button действия произведенные функцией убирать ? Возврат в изначальное состояние.(Только не обновление страници разумеется =) )

Цитата:

Сообщение от Black_Star

Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
#field {
	position: relative;
	width: 300px;
	height: 300px;
	background-color: red;
}
.square {
	position: absolute;
	width: 50px;
	height: 50px;
	background-color: black;
	border: 1px solid white;
	color: white;
	font-size: 1.5em;
	text-align: center;
	cursor: pointer;
}
.square:nth-child(1) {
	top: 10%;
	left: 20%;
} 
.square:nth-child(2) {
	top: 40%;
	left: 20%;
}
.square:nth-child(3) {
	top: 60%;
	left: 20%;
}
.square:nth-child(4) {
	top: 80%;
	left: 20%;
}
#bottom{
	width: 300px;
	height: 100%;
	background-color: green;
	cursor: pointer;
	font-size: 1.5em;
	color: white;
}
</style>
<script type='text/javascript'>
$(function() { 
	$('#field').on('click', 'div', move);
	$('#button').on('click', function() {
		// сюда надо что-то написать ? =)
	var newDiv = $('#field > div');
	newDiv.eq(0).css({'top':'',
					  'left':''});
	newDiv.eq(1).css({'top':'',
					  'left':''});
	newDiv.eq(2).css({'top':'',
					  'left':''});
	newDiv.eq(3).css({'top':'',
					  'left':''});
	})
});
function move () {
	var newDiv = $('#field > div');
	newDiv.eq(0).css({'top':'5%',
					  'left':'41%'});
	newDiv.eq(1).css({'top':'15%',
					  'left':'57%'});
	newDiv.eq(2).css({'top':'65%',
					  'left':'57%'});
	newDiv.eq(3).css({'top':'65%',
					  'left':'25%'});
}
</script>
</head>
<body>
<div id="field">
	<div class="square">1</div>
	<div class="square">2</div>
	<div class="square">3</div>
	<div class="square">4</div>
</div>
<div id="button">Clear function</div>
</body>
</html>

Black_Star,
По клику по кнопке в обработчике события итерируем по каждому диву и сбрасываем значение атрибута style передав ему пустую строку, или удаляем атрибут style. Или поступаем таким же макаром используя метод фильтрации обернутого набора eq вместе с методом css, только в значения свойств передаем нулики, т.е в функцию должны передаваться параметры величин.

Да, спасибо за советы