1

プラグインのアニメーションが終了した後に関数を実行するにはどうすればよいですか?

私はTocifyプラグインを使用しており、現在取り組んでいるプロジェクトの機能をカスタマイズしています。

自動的に生成された目次のエントリをクリックすると、 を使用してそのエントリまでスクロールし$('html, body').animate({'scrollTop', ... ます。それが終わった後、私は何かをする必要があります。

現在、私の回避策はclick、ToC アイテムのイベントにハンドラーをアタッチして、グローバル変数でターゲットを識別する変数を設定しscroll、変数の値をチェックして適切なアクションを実行するウィンドウのイベントに別のハンドラーをアタッチすることです。変数を未定義に設定します。

私の回避策のコードは次のとおりです。

$('.tocify-item').click(function() {
    var unique = $(this).data('unique');
    $target = $('div[data-unique=' + unique + ']').eq(0).next();
});

$(window).scroll(function() {
    $.doTimeout('scroll', 100, function() {
        if ($target !== undefined) {
        $('h1,h2,h3').removeClass('target');
        $target.addClass('target');
        $target = undefined;
    }
});

これはずさんなようです。これを行うより良い方法はありますか？

Tocify が使用$('html,body').promise().done()するイベントのハンドラーで使用しようとしましたが、すぐに起動するので、アニメーションが開始する前に発生すると推測しています。click.tocify

私の回避策を含むすべてのコードを含む CodePen のページがあります: http://codepen.io/Ghodmode/pen/dGdWqV

アップデート：

以下は、わずかに優れた回避策のようです。その余分な変数は必要なく、ユーザーがスクロールするたびに起動するわけではありません。

私のテスト環境では動作しますが、その 100 ミリ秒は完全に任意です。click.tocifyイベントが最初に発生してからアニメーションが開始されるまでの時間がわかりません。一部のブラウザでは動作しない可能性があることを懸念しています。

$('.tocify-item').on('click.tocify', function() {
    var itemid = $(this).data('unique');
    var $target = $('div[data-unique=' + itemid + ']').next();

    var clicktimeout;
    var after_scroll = function() {
        $('html,body').promise().done(function() {
            $('h1,h2,h3').removeClass('target');
            $target.addClass('target');
        });
    };
    clicktimeout = setTimeout(after_scroll, 100);
});
4

1 に答える 1

1

既存のプラグインではこれを行うことはできません..

このプラグインのコミットを作成しました:

スクロール終了後に を呼び出すイベントを追加しましたtocify.scrollEnd。

したがって、次のようにイベントを「聞く」ことができます。

$('div').on('tocify.scrollEnd', function() {
   // .. Your code
});

デモに従ってください。質問がある場合は、お知らせください。

var $target;
$(function() {
  $('body').children().filter(':first').before('<div id="toc"></div>');
  $('#toc').tocify({
    'theme': 'jqueryui'
  });

  $('div').on('tocify.scrollEnd', function(){
    alert('scroll done');
  });
  
  $('#toc').append('<div id="hamburger"></div>');
  $('.tocify-item').click(function() {
    var unique = $(this).data('unique');
    $target = $('div[data-unique=' + unique + ']').eq(0).next();
  });

  $(window).scroll(function() {
    $.doTimeout('scroll', 100, function() {
      if ($target !== undefined) {
        $('h1,h2,h3').removeClass('target');
        $target.addClass('target');
        $target = undefined;
      }
    });
  });
});
#toc {
  z-index: 1;
  width: auto;
  min-width: 1.5em;
  min-height: 1.4em;
  margin: 0;
  top: 1em;
  right: 1em;
}

#toc .tocify-item {
  padding-right: 10px;
}

#hamburger {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

#hamburger::before {
  content: '';
  position: absolute;
  left: 0.25em;
  top: 0.4em;
  width: 1em;
  height: 0.15em;
  background: gray;
  box-shadow: 0 0.25em 0 0 gray, 0 0.5em 0 0 gray;
}

@media (max-width: 40em) {
  #hamburger {
    display: block;
  }
  #toc ul {
    display: none;
  }
}

.target {
  animation: highlight 1.5s ease;
}

@keyframes highlight {
  from { background: yellow; }
  to { background: white; }
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dotimeout/1.0/jquery.ba-dotimeout.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/stylesheets/jquery.tocify.min.css">

<script src="https://rawgit.com/moshfeu/jquery.tocify.js/45d6d52a832b9bf49935d04f9685f9e7d447658e/src/javascripts/jquery.tocify.js"></script>

<h1>Playing with <a href="http://gregfranko.com/jquery.tocify.js/">Tocify</a></h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet blandit leo. Aliquam libero ex, bibendum eu nulla at, semper vehicula orci. Nunc sodales quam et est interdum, ac consectetur mi pharetra. Morbi finibus varius lectus at tempor. Mauris non justo nec risus posuere vehicula a eget diam. Suspendisse auctor bibendum rhoncus. Maecenas sed bibendum odio. Nullam iaculis placerat turpis non finibus. Aliquam sodales volutpat justo eget tempus. Nunc sodales enim non nulla ornare rhoncus. Curabitur eget arcu quis nisi tincidunt molestie eget et lorem.
</p>
<h1>Heading 1</h1>
<p>
  Suspendisse tincidunt, enim quis tristique feugiat, urna mauris ornare odio, a elementum purus arcu quis turpis. Curabitur viverra dictum gravida. Vestibulum tortor erat, ultrices at blandit sed, pellentesque at dui. Nunc pulvinar accumsan lacus ut euismod. Aliquam porta aliquam massa, nec gravida elit eleifend quis. Suspendisse quam purus, porttitor nec ex in, rhoncus ultrices lacus. Fusce pulvinar, quam eget dapibus faucibus, elit erat facilisis ligula, sed volutpat risus justo feugiat risus. Etiam non felis fermentum, ultricies nisi a, euismod metus. Sed hendrerit cursus blandit.
</p>
<h2>Subheadng 1</h2>
<p>
  Vestibulum malesuada diam sit amet ligula posuere faucibus. Aenean lobortis orci eu augue rutrum lacinia. Morbi imperdiet sapien odio, in commodo metus molestie at. Ut fermentum lectus vel mauris rhoncus, eget pellentesque augue commodo. Aenean commodo id odio eget cursus. Pellentesque id consectetur odio. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<p>
  Vivamus vel libero nec lectus consectetur auctor in tempor metus. Quisque varius malesuada velit ac ultrices. Nunc ullamcorper est diam, sed vestibulum sapien finibus vel. Suspendisse mollis vel libero eget sagittis. Nam id odio libero. Donec mi ipsum, maximus a egestas id, dapibus sed arcu. In efficitur risus vel est pharetra, vitae sollicitudin dolor finibus. Vivamus sem magna, condimentum nec porta eu, imperdiet at erat. Nulla aliquet auctor consequat. Aliquam pulvinar sodales mattis. Donec congue, nisl at bibendum pulvinar, nibh justo malesuada nisl, non vulputate odio velit nec felis. Proin aliquam lobortis metus quis fringilla. Sed interdum maximus augue in auctor. Proin faucibus commodo turpis, eleifend tempor neque elementum quis.
</p>
<h2>Subheading 2</h2>
<p>
  Vivamus eu ante est. Maecenas at arcu eu magna maximus sollicitudin a eu nunc. Curabitur non euismod nibh. Etiam tristique lacus sem, at ornare leo laoreet eget. Morbi suscipit augue semper felis placerat laoreet in at elit. Phasellus et congue orci. Quisque ac aliquam nulla. Quisque sed sem cursus, bibendum est at, varius eros. Donec quis molestie turpis. Ut tincidunt pellentesque sem quis tincidunt. Fusce in nibh eu mi ullamcorper porttitor at eu nisl.
</p>
<p>
  Vivamus vel libero nec lectus consectetur auctor in tempor metus. Quisque varius malesuada velit ac ultrices. Nunc ullamcorper est diam, sed vestibulum sapien finibus vel. Suspendisse mollis vel libero eget sagittis. Nam id odio libero. Donec mi ipsum, maximus a egestas id, dapibus sed arcu. In efficitur risus vel est pharetra, vitae sollicitudin dolor finibus. Vivamus sem magna, condimentum nec porta eu, imperdiet at erat. Nulla aliquet auctor consequat. Aliquam pulvinar sodales mattis. Donec congue, nisl at bibendum pulvinar, nibh justo malesuada nisl, non vulputate odio velit nec felis. Proin aliquam lobortis metus quis fringilla. Sed interdum maximus augue in auctor. Proin faucibus commodo turpis, eleifend tempor neque elementum quis.
</p>
<h1>Heading 2</h1>
<p>
  Vivamus vel libero nec lectus consectetur auctor in tempor metus. Quisque varius malesuada velit ac ultrices. Nunc ullamcorper est diam, sed vestibulum sapien finibus vel. Suspendisse mollis vel libero eget sagittis. Nam id odio libero. Donec mi ipsum, maximus a egestas id, dapibus sed arcu. In efficitur risus vel est pharetra, vitae sollicitudin dolor finibus. Vivamus sem magna, condimentum nec porta eu, imperdiet at erat. Nulla aliquet auctor consequat. Aliquam pulvinar sodales mattis. Donec congue, nisl at bibendum pulvinar, nibh justo malesuada nisl, non vulputate odio velit nec felis. Proin aliquam lobortis metus quis fringilla. Sed interdum maximus augue in auctor. Proin faucibus commodo turpis, eleifend tempor neque elementum quis.
</p>
<h2>Subheading 1</h2>
<p>
  Vivamus vel libero nec lectus consectetur auctor in tempor metus. Quisque varius malesuada velit ac ultrices. Nunc ullamcorper est diam, sed vestibulum sapien finibus vel. Suspendisse mollis vel libero eget sagittis. Nam id odio libero. Donec mi ipsum, maximus a egestas id, dapibus sed arcu. In efficitur risus vel est pharetra, vitae sollicitudin dolor finibus. Vivamus sem magna, condimentum nec porta eu, imperdiet at erat. Nulla aliquet auctor consequat. Aliquam pulvinar sodales mattis. Donec congue, nisl at bibendum pulvinar, nibh justo malesuada nisl, non vulputate odio velit nec felis. Proin aliquam lobortis metus quis fringilla. Sed interdum maximus augue in auctor. Proin faucibus commodo turpis, eleifend tempor neque elementum quis.
</p>
<p>
  Vivamus vel libero nec lectus consectetur auctor in tempor metus. Quisque varius malesuada velit ac ultrices. Nunc ullamcorper est diam, sed vestibulum sapien finibus vel. Suspendisse mollis vel libero eget sagittis. Nam id odio libero. Donec mi ipsum, maximus a egestas id, dapibus sed arcu. In efficitur risus vel est pharetra, vitae sollicitudin dolor finibus. Vivamus sem magna, condimentum nec porta eu, imperdiet at erat. Nulla aliquet auctor consequat. Aliquam pulvinar sodales mattis. Donec congue, nisl at bibendum pulvinar, nibh justo malesuada nisl, non vulputate odio velit nec felis. Proin aliquam lobortis metus quis fringilla. Sed interdum maximus augue in auctor. Proin faucibus commodo turpis, eleifend tempor neque elementum quis.
</p>
<h2>Subheading 2</h2>
<p>
  Vivamus vel libero nec lectus consectetur auctor in tempor metus. Quisque varius malesuada velit ac ultrices. Nunc ullamcorper est diam, sed vestibulum sapien finibus vel. Suspendisse mollis vel libero eget sagittis. Nam id odio libero. Donec mi ipsum, maximus a egestas id, dapibus sed arcu. In efficitur risus vel est pharetra, vitae sollicitudin dolor finibus. Vivamus sem magna, condimentum nec porta eu, imperdiet at erat. Nulla aliquet auctor consequat. Aliquam pulvinar sodales mattis. Donec congue, nisl at bibendum pulvinar, nibh justo malesuada nisl, non vulputate odio velit nec felis. Proin aliquam lobortis metus quis fringilla. Sed interdum maximus augue in auctor. Proin faucibus commodo turpis, eleifend tempor neque elementum quis.
</p>
<p>
  Vivamus vel libero nec lectus consectetur auctor in tempor metus. Quisque varius malesuada velit ac ultrices. Nunc ullamcorper est diam, sed vestibulum sapien finibus vel. Suspendisse mollis vel libero eget sagittis. Nam id odio libero. Donec mi ipsum, maximus a egestas id, dapibus sed arcu. In efficitur risus vel est pharetra, vitae sollicitudin dolor finibus. Vivamus sem magna, condimentum nec porta eu, imperdiet at erat. Nulla aliquet auctor consequat. Aliquam pulvinar sodales mattis. Donec congue, nisl at bibendum pulvinar, nibh justo malesuada nisl, non vulputate odio velit nec felis. Proin aliquam lobortis metus quis fringilla. Sed interdum maximus augue in auctor. Proin faucibus commodo turpis, eleifend tempor neque elementum quis.
</p>

http://jsbin.com/nuwini/edit?html,css,js

于 2016-02-09T09:31:25.620 に答える