jQuery・要素がスクロールして画面内に入ったときのイベントが正しく再現されない

こんにちは。
下記のプラグインを使用して、要素が画面内に入ったときにフェードインさせるようと思っています。

http://creator.aainc.co.jp/archives/5357

引用テキスト要素がスクロールで画面内に入った時、内包要素を順番にフェードインするjQueryプラグインを作りました

書いてある通りに記述したのですが、要素を通り過ぎてからじゃないと表示されないのですが、一体なぜでしょう？

ちなみに、下記のプラグインも使用しています。

http://kyasper.com/jquery-tips/

jQuery とっても簡単、ページ内リンクでスムーズスクロール

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> 
5<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
6<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
7<script type="text/javascript" src="js/jquery-scrollInTurn.js"></script>
8
9<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
10<script>
11$(function(){
12   $('a[href^=#]').click(function() {
13      var speed = 400;
14      var href= $(this).attr("href");
15      var target = $(href == "#" || href == "" ? 'html' : href);
16      var position = target.offset().top;
17      $('body,html').animate({scrollTop:position}, speed, 'swing');
18      return false;
19	  
20	  $()
21   });
22   
23   $(document).ready(function() {
24    $('.element').scrollInTurn();
25  });
26   
27});
28</script>
29
30<meta charset="UTF-8">
31<title> </title>
32<link rel="stylesheet" href="css/style.css" type="text/css">
33</head>
34<body>
35
36…
37
38<div class="element">
39    <p><img src="images/.png" alt="画像" class="target" id="...image"/></p>
40    <img src="images/.png" alt="画像" class="target" id="..image"/>
41</div>
42
43…
44
45</body>
46</html>

JavaScript
1/*!
2 * jQuery scrollInTurn plugin -version 1.0.1
3 *
4 *
5 * Copyright 2014, Mayumi Tanji
6 * Released under the MIT license
7 * http://www.opensource.org/licenses/mit-license.php
8 */
9
10 (function( $ ){
11
12  $.fn.scrollInTurn = function( options ) {
13
14    var defaults = $.extend( {
15      selector : '.target',
16      delaySpeed : 300,
17      fadeInSpeed : 300,
18      fadeOutSpeed : 300,
19      easing : 'swing',
20      delayHeight : 500,
21      fadeOutEvent : true
22    }, options);
23
24    return this.each(function() {
25
26      var self = $(this);
27
28      $(window).on('load',function(){
29        self.find(defaults.selector).css({opacity: 0});
30      });
31
32      $(window).on('load scroll resize',function(){
33        var target = self.find(defaults.selector);
34        var elmTop = self.offset().top;
35        var scrTop = $(window).scrollTop();
36        var elmHeight = self.height();
37        var windowHeight = $(window).height();
38        if (scrTop > elmTop - defaults.delayHeight || scrTop + windowHeight > elmTop + elmHeight){
39          if (!self.hasClass('on')) {
40            target.each(function(i){
41              $(this).delay(i*(defaults.delaySpeed)).animate({opacity:'1'}, defaults.fadeInSpeed, defaults.easing);
42            });
43            self.addClass('on');
44          }
45        }
46        if (scrTop + windowHeight < elmTop){
47          if (self.hasClass('on') && defaults.fadeOutEvent === true) {
48            target.stop(true, true).animate({'opacity': 0}, defaults.fadeOutSpeed, defaults.easing);
49            self.removeClass('on');
50          }
51        }
52      });
53
54    });
55
56  };
57
58})( jQuery );

初心者で至らない点もございますが、何卒よろしくお願いします！

yng13

2016/01/08 05:47

このコード、エラー発生せずに動きますか？

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

回答1件

プラグインを使わなくてもできますよ。
jsFiddleのサンプル

jQueryオンリーではないですけど、多少のjavascriptは...(汗)

debounceというのでイベントを拾ってsetTimeoutする処理を別で書いてあります。jQueryでそれも読み込んで、本来$(window).on("scroll",function(...))とする部分を代用しています。

どこから説明するべきか迷いますが、まず通常こういうのは$.animateを使うと思います。
$.animateでdelayを入れて$.cssでプロパティをいじくるというのはできるんですが、例えば、

jq
1$(".test").animate ({
2  marginTop: 10,
3  opacity: 0
4},{何かしらの処理})

こういうのを書くと、対象のマージンをいじくることになるので、それが入っている親要素の高さであったりが動いてしまいます(高さが変わるなど)。それでも問題ない場合はanimateを利用するのが良いですが、親要素の高さはなるべく変化せず、かつ中身の要素を動かしたい場合はtransform: translate(なにがし)を利用するのが良いです。

が、$.delayは$.animateなら普通に処理できるんですけれども$.animateが$.cssに変わると途端に効かなくなります。そこで、$.queue()を利用してやってます。

目的の要素が画面内に入ったかどうかは、その要素のオフセットを調べて、画面の表示領域と比較することで調べられます。また今回は、要素が一度画面から出た場合に再度入ってきたらまたアニメーションさせると言うことをしました。

transformを使っているために、回転や拡大縮小、移動や傾斜等複雑なアニメーションで表示することもできます。またこれらは、別途cssでクラス等を用意して、それらを付け替えるだけでもできるだろうと思います。

lazyloadなどでは、一度表示されたら表示されっぱなしなので(役目としてはそれで良いのですが)、そこはやはりまた動いて欲しい所。そのために、画面内に要素が入ってきて、アニメーションが終わったら.finishクラスをつけて、それがついてる間は表示しっぱなし、画面外に出たら.finishをとって画像を一旦非表示にし、また画面に入ったらアニメーションさせるということをしています。

スクリプトを見てもらうと結構行数があるように思いますが、コメントが入ってるから多く思うだけで、やってることは大したことをしているわけではありません。

注意点として、debounceでの処理は、いわゆるsetTimeoutなので、スクロールが完了した時に処理が開始されます。よってスクロール途中で画面外に出て更に画面内に入ったとしても入った時と変わらないので.finishクラスは外れません。

document.readyの段階で画像を非表示にするhideImage()で画像の最初の状態を作っています。opacityで非表示にして、translateYで位置をずらしているわけです。
画面内に入ったら、incrementFade()と言うのが動いてアニメーションしながら元の位置に戻ると言う事をしています。ここらがわかれば、好きなアニメーションで表示することはできるようになります。

またjQueryは3.0.0αバージョンでやっているので、今後も安泰です。
わかりませんけども(笑)

投稿2016/06/08 03:14