如何在插件的动画完成后执行功能？
我正在使用Tocify插件，并针对我正在研究的项目自定义其功能。
单击自动生成的目录中的条目后，它将使用$('html, body').animate({'scrollTop', ...滚动到该条目。完成后，我需要做一些事情。
[现在，我的解决方法是将一个处理程序附加到ToC项目上的click事件上，以在全局变量中设置一个标识目标的变量，然后将另一个处理程序附加到检查该变量的窗口上的scroll事件上值，采取适当的措施，然后将变量设置为undefined。
这是我的解决方法的代码：
$('.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);
});
您不能使用现有插件来执行此操作。
我创建了这个插件的提交：
我在滚动结束后添加了名为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>