Question

链接到原始模板：

http://ironsummitmedia.github.io/startbootstrap-grayscale/

点击“向下”箭头后，页面逐渐向下移动到下一部分。

我克隆了它并添加了我自己的几个部分，但这会导致点击向下箭头时失去平滑过渡效果。

Plnkr：

http://plnkr.co/edit/0MV3QzRpJcPWlpuNMDav

.btn-circle i.animated {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
}

.btn-circle:hover i.animated {
    -webkit-animation-name: pulse;
    -moz-animation-name: pulse;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
}

Answer 1

滚动代码使用easeInOutExpo，因此您需要效果的缓动插件。如果您不想为此效果添加插件，也可以从代码中删除easeInOutExpo。

$('a.page-scroll').bind('click', function(event) {
     var $anchor = $(this);
     $('html, body').stop().animate({
         scrollTop: $($anchor.attr('href')).offset().top
     }, 1500, 'easeInOutExpo'); 
     event.preventDefault();
});

滚动期间丢失动画

1 个答案: