Помогите с функцией

[name_tux]

Вообщем доделал я движущиеся блоки теперь вопрос такой: как заставить желтый квадрат сдвигать влево и возвращать блок обратно на место?

<script>
var interval;
  function slide() {
  if (parseInt(document.getElementById("block").style.right) < 400) {
     document.getElementById("block").style.right = parseInt(document.getElementById("block").style.right)+10
     setTimeout("slide()",10)
     
   }
}
function back() {
  if (parseInt(document.getElementById("block").style.right) > 0) {
     document.getElementById("block").style.right = parseInt(document.getElementById("block").style.right)-10
     setTimeout("back()",10) ;
 
   }
}
</script>
<div id="block" style="z-index: 2; position:absolute; right:0px; top:100px; width:100%; height:150px; background:red;">
	<a href="javascript:slide()" style="position:absolute; width:30px;height:30px; right:30px; top:30px; background:yellow;"></a></div>
<div style="z-index: 1; position:absolute; right:0px; top:100px; width: 400px; height:150px; background:black;">
	<a href="javascript:back()" style="position:absolute; width:30px; height:30px; right:30px; top:30px; background:green;"></a></div>

Заранее спасибо

[tsigel]

<style>

  .block.moved {
    left: 200px;
  }

 .block {
     background: red;
     width: 20px;
     height: 20px;
     position: absolute;
     left: 0;
     top: 35px;
     transition: left 1s ease;
     -webkit-transition: left 1s ease;
     -moz-transition: left 1s ease;
     -o-transition: left 1s ease;
     -ms-transition: left 1s ease;
  }

</style>

<a>Двигать</a>
<div class="block"></div>

<script>

document.querySelector("a").addEventListener("click", function () {
  document.querySelector(".block").classList.toggle("moved");
}, false);

</script>

[name_tux]

Это то что нужно спасибо сейчас буду шаманить!

[name_tux]

а есть ли возможность совместить с моей функцией?
моя функция мне необходима для 2 div

[tsigel]

<style>

  .block.moved {
    left: 200px;
  }

 .block {
     background: red;
     width: 20px;
     height: 20px;
     position: absolute;
     left: 0;
     top: 35px;
     transition: left 1s ease;
     -webkit-transition: left 1s ease;
     -moz-transition: left 1s ease;
     -o-transition: left 1s ease;
     -ms-transition: left 1s ease;
  }

</style>

<div>
  <a>Двигать</a>
  <div class="block"></div>
</div>

<div>
  <a>Двигать</a>
  <div style="top: 65px;" class="block"></div>
</div>
<script>

[].forEach.call(document.querySelectorAll("a"), function (elem) {
elem.addEventListener("click", function () {
  this.parentNode.querySelector(".block").classList.toggle("moved");
}, false)});;

</script>

[name_tux]

Смысл понятен спасибо!

[name_tux]

А не подскажешь мне еще 1 момент: как мне тег <a> посадить во внутрь передвигаемого <div> пробовал назначит класс не получилось! во вне работает отлично. ставлю во внутрь не работает!

[tsigel]

<style>

  .block.moved {
    left: 200px;
  }

 .block {
     background: red;
     width: 200px;
     height: 20px;
     position: absolute;
     left: 0;
     top: 35px;
     transition: left 1s ease;
     -webkit-transition: left 1s ease;
     -moz-transition: left 1s ease;
     -o-transition: left 1s ease;
     -ms-transition: left 1s ease;
  }

</style>

<div>
  <div class="block"><a>Двигать</a></div>
</div>

<div>
  <div style="top: 65px;" class="block"><a>Двигать</a></div>
</div>
<script>

[].forEach.call(document.querySelectorAll("a"), function (elem) {
elem.addEventListener("click", function () {
  this.parentNode.classList.toggle("moved");
}, false)});

</script>

[name_tux]

Отлично!!! Теперь и в другом div чтобы функция работала. Вот пример:

<style>

  .block.moved {
    right: 300px;
  }

 .block {
     background: red;
     width: 100%;
     height: 100px;
     position: absolute;
     right: 0;
     z-index:2;
	 top: 35px;
     transition: right 1s ease;
     -webkit-transition: right 1s ease;
     -moz-transition: right 1s ease;
     -o-transition: right 1s ease;
     -ms-transition: right 1s ease;
  }
  .blocks{
 	 background: black;
     width: 300px;
     height: 100px;
     position: absolute;
     right: 0;
     top: 35px;
	 z-index:1;
  }
  .a{
  	background:green;
	width:30px;
	height:30px;
	position:absolute;
	top:20px;
	right:20px;
  }

</style>

<div>


	<div class="block">
		<a class="a"></a>
	</div>
	<div class=blocks>
		<a class="a" style="background:blue;"></a>
	</div> 
   	
</div>


<script>

[].forEach.call(document.querySelectorAll(".a"), function (elem) {
elem.addEventListener("click", function () {
  this.parentNode.classList.toggle("moved");
}, false)});

</script>

[tsigel]

<style>

  .block.moved {
    right: 300px;
  }

 .blocks.moved {
    right: 260px;
  }

 .block {
     background: red;
     width: 100%;
     height: 100px;
     position: absolute;
     right: 0;
     z-index:2;
	 top: 35px;
     transition: right 1s ease;
     -webkit-transition: right 1s ease;
     -moz-transition: right 1s ease;
     -o-transition: right 1s ease;
     -ms-transition: right 1s ease;
  }
  .blocks{
 	 background: black;
     width: 300px;
     height: 100px;
     position: absolute;
     right: 0;
     top: 35px;
	 z-index:1;
     transition: right 1s ease;
     -webkit-transition: right 1s ease;
     -moz-transition: right 1s ease;
     -o-transition: right 1s ease;
     -ms-transition: right 1s ease;
  }
  .a{
  	background:green;
	width:30px;
	height:30px;
	position:absolute;
	top:20px;
	right:20px;
  }

</style>

<div>


	<div class="block">
		<a class="a"></a>
	</div>
	<div class=blocks>
		<a class="a" style="background:blue;"></a>
	</div> 
   	
</div>


<script>

[].forEach.call(document.querySelectorAll(".a"), function (elem) {
elem.addEventListener("click", function () {
  this.parentNode.classList.toggle("moved");
}, false)});

</script>