スクロールイベント　画像拡大されるまで時間がかかるのはなぜ？

画面の中央までスクロールすると
色が変わる画像、その下には同サイズ内で
画像が拡大されるものがあります。

画像が拡大されるほうは
画面中央までスクロールしても
拡大されるまで時間がかかり、
勝手に縮小したりしてしまいます。

何が原因なのでしょうか。
教えていただけませんか。

HTML
1
2<div id="divWrapp">
3  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/732318/01.jpg" class="mainImg">
4</div>
5  
6<div id="divWrapp2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/732318/02.jpg" alt=""  class="mainImg"/></div>
7

css
1
2**body**{
3  height: 3000px;
4}
5**#divWrapp**{
6  width: 500px;
7  height:350px;
8  margin: 900px auto 0;
9  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/732318/01_off.jpg") no-repeat;
10}
11**#divWrapp .mainImg**{
12   opacity: 0; 
13}
14
15**#divWrapp2**{
16  width: 350px;
17  height:233px;
18  margin: 900px auto 0;
19  overflow:hidden;
20}
21**#divWrapp2 .mainImg**{
22  opacity:1;
23  width: 350px;
24  height:233px;
25}
26
27

javascript
1//上部のdiv
2$(function(){
3  $(window).scroll(function(){
4    
5      function ImgLightFunc(){
6          $('#divWrapp .mainImg').stop().animate({"opacity":"1"},{"duration":"1500"});
7        }
8      function ImgDarkFunc(){
9        $('#divWrapp .mainImg').stop().animate({"opacity":"0"},{"duration":"1500"});
10      }
11
12var obj_t_pos = $('#divWrapp').offset().top;
13var scr_count = $(document).scrollTop()+(window.innerHeight/2); //ディスプレイの半分の高さ
14
15if(scr_count > obj_t_pos){
16    ImgLightFunc();
17    }else{
18    ImgDarkFunc();
19}
20
21});
22});
23
24
25//下部のdiv
26$(function(){
27    $(window).scroll(function(){
28        function ImgLargeFunc(){
29            $('#divWrapp2 .mainImg').animate({
30              "width":"385px",
31            "height":"256px"},{"duration":"1500"});
32};
33     function ImgSmallFunc(){
34            $('#divWrapp2 .mainImg').stop().animate({
35              "width":"350px",
36              "height":"233px"},1500);
37            $("#divWrapp2 .mainImg")}
38
39var obj_t_pos = $('#divWrapp2').offset().top;
40var scr_count = $(document).scrollTop()+(window.innerHeight/2); //ディスプレイの半分の高さ
41
42if(scr_count > obj_t_pos){
43    ImgLargeFunc();
44}else{
45    ImgSmallFunc();
46}
47
48});
49});
50

kei344

2016/12/17 18:56

'''（カンマ3つ）ではなく ```（バッククオート3つ）です。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

up24

2016/12/17 19:06

修正しました。失礼しました。

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

回答1件

ベストアンサー

ImgLargeFunc()で.stop()がないからではないですか？
こういうことを防ぐために、似たような処理を1つの関数にまとめ、引数で違いを指定することをお勧めします。

JavaScript
1//下部のdiv
2
3$(function() {
4	$(window).scroll(function() {
5		function ImgZoomFunc(width, height) {
6			$('#divWrapp2 .mainImg').stop().animate({
7				"width"  : width,
8				"height" : height
9			}, 1500);
10		}
11
12		var obj_t_pos = $('#divWrapp2').offset().top;
13		var scr_count = $(document).scrollTop() + (window.innerHeight / 2); //ディスプレイの半分の高さ
14
15		if (scr_count > obj_t_pos) {
16			ImgZoomFunc("385px", "256px");
17		} else {
18			ImgZoomFunc("350px", "233px");
19		}
20	});
21});