###実現したいこと
jQueryでページの区切り(セクション)ごとに背景をanimateで変化させたい
###発生している問題
cssでは変化するが、animateを当てはめても変化しない。
以下のurlを参考にいたしました。
http://www.webopixel.net/javascript/487.html
###該当のソースコード
HTML
1<div class="section"> 2 <h2>Section0</h2> 3 <p> 4 ここは0番目のコンテンツです。 5 </p> 6 </div> 7 <div class="section"> 8 <h2>Section1</h2> 9 <p> 10 ここは1番目のコンテンツです。 11 </p> 12 </div> 13 <div class="section"> 14 <h2>Section2</h2> 15 <p> 16 ここは2番目のコンテンツです。 17 </p> 18 </div>
jQuery
1$(function() { 2 var pageTop = $('html, body'); 3 //各sectionの位置を入れる配列 4 var secTopArr = new Array(); 5 //現在の番号 6 var current = -1; 7 //カラー設定の配列 8 var bgColor = new Array('#FFCC00','#33CCFF', '#CCCC99', '#33CC99', '#FF99CC'); 9 //各sectionの位置を入れる 10 $('.section').each(function (i) { 11 secTopArr[i] = $(this).offset().top; 12 }); 13 14 //背景変更 15 function chengeBG(secNum) { 16 if (secNum != current) { 17 current = secNum; 18 //animateだと変化しない↓ 19 //$('body').stop().animate({backgroundColor: bgColor[current]},200); 20 //cssだと変化する↓ 21 $('body').css({backgroundColor: bgColor[current]}); 22 } 23 } 24 //スクロールイベント 25 $(window).scroll(function () { 26 for (var i = secTopArr.length-1; i>=0; i--) { 27 if ($(window).scrollTop() > secTopArr[i] - 100) { 28 chengeBG(i); 29 break; 30 } 31 } 32 }); 33 34}); 35
どうぞ、よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/25 14:22 編集