1

插件动画完成后如何执行功能?

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

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

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