質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    16491questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6726questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4030questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 244

signon

score 3

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

 該当のソースコード

<table>
 <tbody>
 <tr>
   <th>項目名</th>
 <td>
   <a href="#">
     <img src="img/works/worksList_01_off.png" width="100%" class="base01">
     <img src="img/works/worksList_01_on.png" width="100%" class="hide01">
   </a>
 </td>
 </tr>
 </tbody>
</table>

<table>
 <tbody>
 <tr>
   <th>項目名</th>
 <td>
   <a href="#">
     <img src="img/works/worksList_02_off.png" width="100%" class="base02">
     <img src="img/works/worksList_02_on.png" width="100%" class="hide02">
   </a>
 </td>
 </tr>
 </tbody>
</table>

<table>
 <tbody>
 <tr>
     <th>項目名</th>
 <td>
   <a href="#">
     <img src="img/works/worksList_03_off.png" width="100%" class="base03">
     <img src="img/works/worksList_03_on.png" width="100%" class="hide03">
   </a>
 </td>
 </tr>
 </tbody>
</table>
//差替え1
jQuery(function() {
    var listImg = jQuery('img.hide01');
    listImg.hide(); 
    var base01 = jQuery('img.base01'); 
    //スマホ時にスクロールが100に達したら差替え
    var windowWidth = jQuery(window).width();
    var windowSm = 767;
   if (windowWidth <= windowSm) {
 jQuery(window).scroll(function () {
   if (jQuery(this).scrollTop() > 100) {
        //表示方法
        base01.fadeOut();
        listImg.fadeIn();
     } else {
        //表示後
    base01.hide();
        }
    });
    }
});
//差替え2
jQuery(function() {
    var listImg2 = jQuery('img.hide02');
    listImg2.hide(); 
    var base02 = jQuery('img.base02'); 
    //スマホ時にスクロールが200に達したら差替え
    var windowWidth = jQuery(window).width();
    var windowSm = 767;
   if (windowWidth <= windowSm) {
 jQuery(window).scroll(function () {
   if (jQuery(this).scrollTop() > 200) {
        //表示方法
        base02.fadeOut();
        listImg2.fadeIn();
     } else {
        //表示後
    base02.hide();
        }
    });
    }
});
//差替え3
jQuery(function() {
    var listImg3 = jQuery('img.hide03');
    listImg3.hide(); 
    var base03 = jQuery('img.base03'); 
    //スマホ時にスクロールが300に達したら差替え
    var windowWidth = jQuery(window).width();
    var windowSm = 767;
   if (windowWidth <= windowSm) {
 jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 300) {
        //表示方法
        base03.fadeOut();
        listImg3.fadeIn();
     } else {
        //表示後
    base03.hide();
        }
    });
    }
});

 試したこと

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/07/17 14:06

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

    キャンセル

  • mts10806

    2018/07/17 14:08

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

    キャンセル

  • signon

    2018/07/17 14:08

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

    キャンセル

回答 1

checkベストアンサー

+1

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

jQuery(function() {
  var listImg1 = jQuery('img.hide01');
  var listImg2 = jQuery('img.hide02');
  var listImg3 = jQuery('img.hide03');

  listImg1.hide();
  listImg2.hide(); 
  listImg3.hide(); 

  var base01 = jQuery('img.base01');
  var base02 = jQuery('img.base02'); 
  var base03 = jQuery('img.base03'); 

  //スマホ時にスクロールが100に達したら差替え
  var windowWidth = jQuery(window).width();
  var windowSm = 767;

  if (windowWidth <= windowSm) {
    jQuery(window).scroll(function () {    
      var scrollTop = jQuery(this).scrollTop();

      if (scrollTop > 100) {
        base01.fadeOut(200, function() {
          listImg1.fadeIn(200);
        });
      }
      if (scrollTop > 200) {
        base02.fadeOut(200, function() {
          listImg2.fadeIn(200);
        });
      }
      if (scrollTop > 300) {
        base03.fadeOut(200, function() {
          listImg3.fadeIn(200);
        });
      }
    });
    }
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/17 16:51

    解決することができ、希望通りの動きになりました。
    本当に有難う御座いました。

    尚、説明不備があり失礼しました。画像は同じheightです。
    「fadeInとfadeOutが同時に起こっている...」とても勉強になりました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16491questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6726questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4030questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。