我找到了 this有用的 jQuery,用于在链接内容滚动时突出显示的导航。我想我明白这是如何工作的,但是我在为点击的元素添加过渡/动画时遇到了麻烦。我希望这些部分在导航触发时平滑过渡。
我已经尝试将它添加到 CSS 中
.section {
transition: transform .5s ease-in-out;
}
还有 jQuery
$('#navigation').click(function(){
$('.section').animate('slow');
});
如果有人能解释我在这个特定示例中做错了什么,我将不胜感激。
这是代码和https://jsfiddle.net/r040p7oa/
<div id="navigation">
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
</ul>
</div>
<div id="sections">
<div id ="section1" class="section">I'm section 1</div>
<div id ="section2" class="section">I'm section 2
</div>
#sections {
position: absolute;
top: 0;
left: 120px;
}
#navigation {
position: fixed;
top: 0;
left: 0;
}
.active {
background: red;
}
.section {
padding-bottom: 400px;
}
-
$(window).scroll(function() {
var position = $(this).scrollTop();
$('.section').each(function() {
var target = $(this).offset().top;
var id = $(this).attr('id');
if (position >= target) {
$('#navigation > ul > li > a').removeClass('active');
$('#navigation > ul > li > a[href=#' + id + ']').addClass('active');
}
});
});
最佳答案
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
关于javascript - 如何为链接触发的过渡设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34657244/