jQuery（javascript）にてスマホスクロール値で複数画像を差替える

jQuery（javascript）を使用して
スマートフォン時に「スクロールして画像が見えたら順に別画像に差替える（全3画像）」が上手くいきません。
現状：最初の画像が変わると、残りの画像も一気に差し替わります。（全3画像のみ）
補足：差し替わった画像は、その後はそのままを希望しおります。

該当のソースコード

html
1<table>
2 <tbody>
3 <tr>
4   <th>項目名</th>
5 <td>
6   <a href="#">
7     <img src="img/works/worksList_01_off.png" width="100%" class="base01">
8     <img src="img/works/worksList_01_on.png" width="100%" class="hide01">
9   </a>
10 </td>
11 </tr>
12 </tbody>
13</table>
14
15<table>
16 <tbody>
17 <tr>
18   <th>項目名</th>
19 <td>
20   <a href="#">
21     <img src="img/works/worksList_02_off.png" width="100%" class="base02">
22     <img src="img/works/worksList_02_on.png" width="100%" class="hide02">
23   </a>
24 </td>
25 </tr>
26 </tbody>
27</table>
28
29<table>
30 <tbody>
31 <tr>
32     <th>項目名</th>
33 <td>
34   <a href="#">
35     <img src="img/works/worksList_03_off.png" width="100%" class="base03">
36     <img src="img/works/worksList_03_on.png" width="100%" class="hide03">
37   </a>
38 </td>
39 </tr>
40 </tbody>
41</table>
42

jquery
1//差替え1
2jQuery(function() {
3    var listImg = jQuery('img.hide01');
4    listImg.hide(); 
5    var base01 = jQuery('img.base01'); 
6    //スマホ時にスクロールが100に達したら差替え
7    var windowWidth = jQuery(window).width();
8    var windowSm = 767;
9   if (windowWidth <= windowSm) {
10 jQuery(window).scroll(function () {
11   if (jQuery(this).scrollTop() > 100) {
12        //表示方法
13        base01.fadeOut();
14        listImg.fadeIn();
15	 } else {
16        //表示後
17	base01.hide();
18        }
19    });
20    }
21});
22//差替え2
23jQuery(function() {
24    var listImg2 = jQuery('img.hide02');
25    listImg2.hide(); 
26    var base02 = jQuery('img.base02'); 
27    //スマホ時にスクロールが200に達したら差替え
28    var windowWidth = jQuery(window).width();
29    var windowSm = 767;
30   if (windowWidth <= windowSm) {
31 jQuery(window).scroll(function () {
32   if (jQuery(this).scrollTop() > 200) {
33        //表示方法
34        base02.fadeOut();
35        listImg2.fadeIn();
36	 } else {
37        //表示後
38	base02.hide();
39        }
40    });
41    }
42});
43//差替え3
44jQuery(function() {
45    var listImg3 = jQuery('img.hide03');
46    listImg3.hide(); 
47    var base03 = jQuery('img.base03'); 
48    //スマホ時にスクロールが300に達したら差替え
49    var windowWidth = jQuery(window).width();
50    var windowSm = 767;
51   if (windowWidth <= windowSm) {
52 jQuery(window).scroll(function () {
53    if (jQuery(this).scrollTop() > 300) {
54        //表示方法
55        base03.fadeOut();
56        listImg3.fadeIn();
57	 } else {
58        //表示後
59	base03.hide();
60        }
61    });
62    }
63});

試したこと

CSSでdispalayやopacityの指定はせず、fadeInとfadeOutで画像表示非表示を行っています。
一つのコードにまとめることも出来ていません。
ご教授の程、どうか宜しくお願いします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2018/07/17 05:06

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

m.ts10806

2018/07/17 05:08

インデントが全くないようなのでコードが読みづらく、また閉じ忘れなどもおきやすい状態となっています。コードフォーマッターなど利用してコードを調整してください。

signon

2018/07/17 05:08

ご指摘ありがとうございます。今から直ぐに修正します。

行動規範の内容に同意します

回答1件

ベストアンサー

fadeInとfadeOutが同時に起こっているため、一時的にbase画像とhide画像が両方共表示されます。
そのため、全体の高さが変更され、スクロールイベントが発生します。
画像の高さが同じであれば、下記のようにすることで、fadeOut→fadeInすることができ、
希望通りの動きになるのではないかと思います。

js
1jQuery(function() {
2  var listImg1 = jQuery('img.hide01');
3  var listImg2 = jQuery('img.hide02');
4  var listImg3 = jQuery('img.hide03');
5
6  listImg1.hide();
7  listImg2.hide(); 
8  listImg3.hide(); 
9
10  var base01 = jQuery('img.base01');
11  var base02 = jQuery('img.base02'); 
12  var base03 = jQuery('img.base03'); 
13
14  //スマホ時にスクロールが100に達したら差替え
15  var windowWidth = jQuery(window).width();
16  var windowSm = 767;
17
18  if (windowWidth <= windowSm) {
19    jQuery(window).scroll(function () {    
20      var scrollTop = jQuery(this).scrollTop();
21      
22      if (scrollTop > 100) {
23        base01.fadeOut(200, function() {
24          listImg1.fadeIn(200);
25        });
26      }
27      if (scrollTop > 200) {
28        base02.fadeOut(200, function() {
29          listImg2.fadeIn(200);
30        });
31      }
32      if (scrollTop > 300) {
33        base03.fadeOut(200, function() {
34          listImg3.fadeIn(200);
35        });
36      }
37    });
38    }
39});