[JavaScript, jQuery]オブジェクトのサイズを変更させつつ、指定した方向に移動させたい

Question

前提・実現したいこと

JavascriptかjQueryを用いて、オブジェクトのサイズを変更させつつ、指定した方向に移動させたいです。

現段階では、ボタンをクリックすると指定した場所に画像を表示させることができています。

上記の画像のボタン部分をクリックすると、赤の丸が緑の丸の部分へ、緑の丸が黄色の丸の部分へ、黄色の丸が赤の丸の部分へ移動します。

これを、大きさを変えつつ、指定した場所へ移動させたいです。

おそらく、指定場所の座標を取得して、サイズを変更しつつ移動させるのだと思いますが、どう手を付けて良いか全く分からない状態です。

何卒、ご回答の程よろしくお願いいたします。

window.onload = function(){
  photo_change();
};

function photo_change(){
  var btn = document.getElementById("next-btn");
  btn.onclick = function(){
    var photos = document.getElementsByClassName("photos")
    for (var i = 0; i < photos.length; i++) {
      var next_num = photos[i].src[59] - 1;
      next_num = parseInt(next_num)
      if(next_num == 0){
        next_num = 3;
      };
      photos[i].src = "images/photo"+next_num+".jpg";
    };
  };
}

###補足
皆様、ご回答ありがとうございます。

説明不足で申し訳ありません。
見にくく、無駄のあるコードかと思いますが、記載しました。
流れとしては、黒いボタンを押す→photo_changeが起動する→それぞれの画像のパスの番号(59番目)を取得する→次の表示領域に画像を移動させる
となっています。
座標の取得と移動、サイズの変更等はまだ試しておりません。
そもそもタイトルに示したことが実現できるのかどうかも分かりませんでしたので、質問させていただきました。

何をどうしたいのかというと、指定した場所へのスムーズな移動とそれに伴うサイズ変更です。
具体的には、赤の丸を緑の丸がある場所へサイズを変更しながら移動（緑の丸を黄色の丸がある場所へサイズを変更しながら移動、黄色の丸をサイズを変更しながら赤い丸がある場所へ移動）といった感じのサイクルを、黒ボタンを押すごとに実現させたいです。

このような説明で大丈夫でしょうか...？
分かりにくくて申し訳ございません。

何卒、ご回答の程よろしくお願いいたします。

###試したこと
プログラミングを始めてまだ1週間ちょっとなので、本当に無駄が多いコードだと思います...。
見にくくて申し訳ございません。

一応、それぞれのオブジェクトの座標を取得し、サイズ変更することはできました。
しかし、オブジェクト間の距離を測ってから移動させることができません。

function Test(){
  var btn = document.getElementById("next-btn");
  btn.onclick = function(){
    //3つの円を取得
    var photos = document.getElementsByClassName("photos")
    //サイズ変更と移動のための変数を初期化
    var now_width = [];　//幅
    var next_width = [];
    var now_height = [];　//高さ
    var next_height = [];
    var now_pos_obj = [];　//座標オブジェクト
    var next_pos_obj = [];
    var now_left = [];　//画面左からの距離
    var next_left = [];
    var now_top = [];　//画面上からの距離
    var next_top = [];
    var distance_x = [];　//自分自身と次に移動すべきオブジェクト間の距離
    var distance_y = [];

    //クリック時の座標を取得
    //自分自身の座標と次に移動すべきオブジェクトの座標を取得
    for (var i = 0; i < photos.length; i++) {
      var next_num = i + 1;
      if(next_num == 3){
        next_num = 0;
      };

      now_pos_obj.push(photos[i].getBoundingClientRect());
      next_pos_obj.push(photos[next_num].getBoundingClientRect());
    };

    //移動に必要な情報を取得
    for(var j = 0; j < 3; j++){
      //次のサイズを取得
      next_width.push(next_pos_obj[j].width.toString());
      next_height.push(next_pos_obj[j].height.toString());

      //距離を求めるための値を取得
      now_left.push(now_pos_obj[j].left);
      next_left.push(next_pos_obj[j].left);
      now_top.push(now_pos_obj[j].top);
      next_top.push(next_pos_obj[j].top);
    };

　　 //現在地から次の目的地までの距離を算出
    for(var k = 0; k < 3; k++){
　    //横方向
      distance_x.push((next_left[k] - now_left[k]).toString());
      //縦方向
      distance_y.push((next_top[k] - now_top[k]).toString());

    //それぞれのオブジェクトをサイズ変更&移動させる
　　//******************************移動部分が上手くいかない******************************
    for(var l = 0; l < 3; l++){
      $(photos[l]).animate({"top":distance_y[l]+"px", "left":distance_x[l]+"px", 
                            "width":next_width[l]+"px", "height":next_height[l]+"px"});
      };
    };

###テスト画面

現在はその場でそれぞれのオブジェクトのサイズが変わっているだけなのですが、
これと同時に(時計回りの順番で)移動させるにはどうしたら良いでしょうか？
例えば、一回目のクリック時（二枚目の写真）には赤を緑の位置へ、緑を黄色の位置へ、黄色を赤の位置へ移動させる感じです。

何卒、ご回答の程よろしくお願いいたします。

###ログ画面

リストの中に値は格納されているのですが、サイズだけが変更されて、移動部分が動作しません。
そもそも、距離の計算方法が間違っているのでしょうか...？

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[akihiro3]

コードを提示をお願いします。あと上記の画像ボタン部分がどれか分かりません（たぶん黒丸三角？）あと、聞きたい事を具体的に教えてください。「座標取得をやったけど出来ない」「サイズ変更が反映されない」「エラーが出ていて対処しても何も変わらない」などなど。。。

Answer 1

・座標取得のやり方を聞かれてるのでしょうか？
座標取得

・margin操作（animate）でもできます
margin操作

・他だと、こんなのもありました
画面内でのオブジェクトの移動

よければ参考にしてみてください

追記

補足とコード確認しました

・サイズ変更の方法です
画像サイズの変更
jsでCSSの変更

試してない事は上の方法などを参考にしてみてください
あとsrc[59]は連続した数字がループ内で取得できるか？(「i」以外で)
というのが分かれば良いですか？

 var length = 59;
 var src = 59;
 function result() {
	 console.log('photos[' + i + ']');
	 console.log('src[' + src + ']');
 }
 
 for ( var i = 0; i < length; i++ ) {
	 if ( i == length - 1 ) {
		 src = 3;
		 result();
	 } else {
		 src--;
		 result();
	 }

良ければこちらも参考にしてください
コード追記

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
	<meta charset="utf-8">
	<title>test</title>
	<style media="screen">
	* {
		margin: 0px;
		padding: 0px;
	}

	.container {
		width: 340px;
		height: 140px;
		margin: 50px auto;
		border: 1px solid #faf;
	}

	.circles {
		height: 140px;
		position: relative;
	}

	.circle {
		display: inline-block;
		position:absolute;
	}

	.red {
		background: #f00;
		width: 100px;
		height: 100px;
		border: 1px solid #000;
		border-radius: 50%;
		top: 20px;
		left: 20px;
	}

	.green {
		background: #0f0;
		width: 30px;
		height: 30px;
		border: 1px solid #000;
		border-radius: 50%;
		top: 20px;
		left: 50%;
	}

	.yellow {
		background: #ff0;
		width: 50px;
		height: 50px;
		border: 1px solid #000;
		border-radius: 50%;
		bottom: 20px;
		right: 20px;
	}

	.btn {
		background: #000;
		width: 20px;
		height: 20px;
		border: none;
		border-radius: 50%;
		color: #fff;
		line-height: 20px;
		position: absolute;
		bottom: 30px;
		left: 50%;
	}
	</style>
	<link rel="stylesheet" href="./test.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
	<div class="container">
		<ul class="circles">
			<li class="circle red"></li>
			<li class="circle green"></li>
			<li class="circle yellow"></li>
			<button type="button" class="btn">◀</button>
		</ul>
	</div>

	</div>
	<script type="text/javascript">
	$(function() {
		var circle = $('.circle');

		$('.btn').click(function() {
			$('.circle').each(function(i) { // 兄弟要素に繰り返し処理
				if (i == circle.length - 1) {	// html上で次の要素が無い時
					var next = circle.eq(0).position();	// 次の要素の座標を取得
					var width = circle.width(); // 次の要素の幅を取得
					var height = circle.height(); // 次の要素の高さを取得

					$(this).animate({
						'top': next.top,	// 移動先のy座標
						'left': next.left,	// 移動先のx座標
						'width': width,	// 移動先での幅指定
						'height': height,	// 移動先での高さ指定
					},1000)	// 1000ミリ秒(1秒)の速さで変化

				} else {	// html上で次の要素がある時
					var next = $(this).next().position();	// 次の要素の座標を取得
					var width = $(this).next().width(); // 次の要素の幅を取得
					var height = $(this).next().height(); // 次の要素の高さを取得

					$(this).animate({
						'top': next.top,	// 移動先のy座標
						'left': next.left,	// 移動先のx座標
						'width': width,	// 移動先での幅指定
						'height': height,	// 移動先での高さ指定
					},1000)	// 1000ミリ秒(1秒)の速さで変化

				}
			});
		});

	});
</script>
</body>
</html>

Comments

[akihiro3]

補足確認して追記しました
試してない事を試してください

[dokudoku]

ご回答ありがとうございます！
教えていただいたサイトを参考にコードを書いてみました。

[akihiro3]

始めたばかりなのにスゴイですね

何かおかしいと思ったらまずデベロッパ確認するとヒントがありますよ
（右クリック→検証）
エラーは出てますか？
出てたら何と出てますか？

そのエラー1文をコピーして検索すると
ヒントや対処情報が沢山確認もできますよ

これからの為にこの癖は付けといた方がいいですよ

[dokudoku]

楽しくて毎日やってます！

デベロッパ確認してみましたが、エラーは出ていません...。
ログを出したりしてキチンと値が格納されているかも確認したのですが、移動だけがどうしてもうまく動作しません...。

アドバイスありがとうございます！
これからはエラー部分も含め具体的に質問するよう心がけます！

[akihiro3]

大きさは変わってるし、
エラーが無いという事は構文などは合ってるという事かな？
htmlとcssを見てみたいところですが
position:absoluteを忘れてませんか？

とりあえず、作ってみたのでコード追記しておきます。

[akihiro3]

あ！！ごめんなさい。。。
animateはjqueryだけと思います
そして、私のコードはjqueryで作ってます

jquery無しでスムーズな動き出来ますが面倒なコードになるので、
cssでtransitionだと思います

[dokudoku]

コードありがとうございます！
思っていた通りの挙動でした！