如何设置由链接触发的过渡的动画

How to animate transitions triggered by links

本文关键字：接触 动画 链接 何设置 设置      更新时间：2023-09-26

我发现这个有用的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');
    }
});
});

https://jsfiddle.net/r040p7oa/

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

工作小提琴：）代码从这里

这应该做到：

$('a').click(function(e) {
   e.preventDefault();
   $('body, html').animate({scrollTop:$($(this).attr("href")).offset().top});
  });

这是JSFiddle演示

相关文章：