jQuery メソッドチェーンの使い方

いつもお世話になってます。

表題の件で質問です。

メソッドチェーンを使い、画像のフェードインと縮小を同時にしたいのですが、
動かすと、フェードインが終わった後に画像の縮小が始まります。

どうして同時にならないのかが分かりません。

osはMAC ブラウザはchromeです。

下記コードです。（メソッドチェーン箇所は最初の１０行です）

他に必要情報がありましたら追記致しますのでおっしゃってください。
宜しくお願いします。

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

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

回答1件

下記の記事が質問者さんとほぼそのままのことをやろうとしているので参考になるかもしれません

jQueryの.animate()と.fadeIn()を同時に動かしたい時

.animate()

queue (default: true)
Type: Boolean or String
A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call .dequeue("queuename") to start it.
エフェクトキューにアニメーションを配置するかどうかを示すブール値。 falseの場合、アニメーションはすぐに開始されます。 jQuery 1.7以降、queueオプションは文字列を受け入れることもできます。この場合、アニメーションはその文字列によって表されるキューに追加されます。カスタムキュー名を使用すると、アニメーションは自動的に開始されません。 .dequeue（ "queuename"）を呼び出して起動する必要があります。

投稿2018/05/18 05:36

編集2018/05/18 05:39