Как выполнить функцию после завершения анимации прокрутки плагина?

Question

Как выполнить функцию после завершения анимации прокрутки плагина?

Как выполнить функцию после завершения анимации плагина?

Я использую плагин 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;
    }
});

Это кажется небрежным. Есть лучший способ сделать это?

Я пытался использовать $('html,body').promise().done() в обработчике для click.tocify Событие, которое использует 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);
});

Спасибо.

1

jquery jquery-animate jquery-tocify-js

Источник

user2948042 09 фев '16 в 08:23

1 ответ

Решение

Другие вопросы по тегам jquery jquery-animate jquery-tocify-js

user863110 09 фев '16 в 09:31 2016-02-09 09:31 · Accepted Answer · 2016-02-09 09:31

Вы не можете сделать это с существующим плагином..

Я был создан коммит этого плагина:

После завершения прокрутки мне добавили событие 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