Question

如何在插件动画结束后执行某个功能？

我正在使用Tocify插件并为我正在处理的项目自定义其功能。

点击自动生成的目录中的条目后，它会使用$('html, body').animate({'scrollTop', ...滚动到该条目。完成后我需要做点什么。

现在，我的解决方法是将一个处理程序附加到ToC项目上的click事件，以设置一个标识全局变量中的目标的变量，然后将另一个处理程序附加到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);
});

谢谢。

Answer 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

插件的滚动动画结束后如何执行函数？

更新

1 个答案: