いつもお世話になってます。
表題の件で質問です。
メソッドチェーンを使い、画像のフェードインと縮小を同時にしたいのですが、
動かすと、フェードインが終わった後に画像の縮小が始まります。
どうして同時にならないのかが分かりません。
osはMAC ブラウザはchromeです。
下記コードです。(メソッドチェーン箇所は最初の10行です)
他に必要情報がありましたら追記致しますのでおっしゃってください。
宜しくお願いします。
html
1$(function () { 2 3setTimeout(function(){ 4 $('#movieImageSecond').fadeIn(3000).animate({ 5 'backgroundSize':'1000px' 6 },3000) 7 }); 8 9 },3000); 10 11 12$(window).scroll(function() { 13var workOffset = $('#work').offset().top; 14// alert(workOffset); 15var scroll = $(window).scrollTop(); 16// alert(scroll); 17if(workOffset < scroll){ 18 $("header").fadeIn(500); 19}else{ 20 $("header").fadeOut(500); 21} 22}); 23 24 25$('a[href^="#"]').click(function() { 26 // スクロールの速度 27 var speed = 400; // ミリ秒で記述 28 var href = $(this).attr("href"); 29 var target = $(href == "#" || href == "" ? 'html' : href); 30 var position = target.offset().top; 31 $('body,html').animate({ 32 scrollTop: position 33 }, speed, 'swing'); 34 return false; 35}); 36 37 38 setTimeout('icon()'); //作業員アニメーションを実行(呼び出し) 39 setTimeout('workBk()');//背景画像アニメーションを実行(呼び出し) 40 setTimeout('recruite()');//背景画像アニメーションを実行(呼び出し) 41 42}); 43 44//普通の関数 45function icon() { 46 $('.pict1,.pict2,.pict3').animate({ 47 marginTop: '-=10px' 48 }, 800).animate({ 49 marginTop: '+=10px' 50 }, 800); 51 setTimeout('icon()', 1600); //アニメーションを繰り返す間隔 52 }; 53 54 55function workBk() { 56 $('#work').animate({ 57 backgroundSize:'-=100px' 58 }, 2000).animate({ 59 backgroundSize: '+=100px' 60 }, 2000); 61 setTimeout('workBk()', 4000); //アニメーションを繰り返す間隔 62 }; 63 64 65function recruite() { 66 $('#recruite').animate({ 67 backgroundSize:'-=100px' 68 }, 2000).animate({ 69 backgroundSize: '+=100px' 70 }, 2000); 71 setTimeout('recruite()', 4000); //アニメーションを繰り返す間隔 72 }; 73 74 75</script> 76</head> 77 78<body> 79 80 <div id="movieContainer"> 81 82 <div id="movieImageSecond"> 83 <p class="text"> 84 弊社が信頼される理由 85 </p> 86 </div> 87 88 </div> 89</body> 90
css
1#movieContainer { 2 height: 100vh; 3} 4 5#movieImageSecond{ 6 height: 100vh; 7 background: url(main2.jpg); 8 background-size: 1500px; 9 display: none; 10 background-position: center; 11} 12 13#movieImageSecond p{ 14 font-size: 80px; 15 color: white; 16 font-weight: bold; 17 text-align: center; 18 line-height: 100vh; 19 display: none; 20} 21
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。