jQuery Easing插件不宽松？

Question

我不知道为什么这对我不起作用。 也许其中一个jQuery Guru可以帮助我完成这项工作！

从下面的脚本中你可以看到我有一个名为five的UL块，我想放松到那里锚（#web）。 当我点击菜单项时，我确实要启动警报，所以我认为该部分是正确的。

$(function() {
$('ul.five a').bind('click',function(event){
    var $anchor = $(this);
    alert('hellooo')
    $('html, body, section').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 500,'easeInOutExpo');

    event.preventDefault();
});

}）;

这是我的一个部分看起来如果有帮助的话？

<section class="row divider-down" id="section1">
<header>
    <h1><img src="image/image1.png" alt="Alt"></h1>
    <p>some text</p>
</header>

有没有人在这里看到任何明显错误的东西？ 就像我说的那样，警报弹出但它并没有“轻松”到该部分？

Answer 1

我觉得你很亲密 两件事情：

1. 将你的动画改为$('body')
2. 除非您包含jQuery UI，否则不能使用'easeInOutExpo'（请参阅下面的编辑）。

尝试这个：

$(function() {
    $('ul.five a').bind('click',function(event){
        var $anchor = $(this);
        var $section = $($anchor.attr('href')); 
        if (!$section.length) { return; } // bail if there is no section

        $('body').stop().animate({ // only scroll the body
            scrollTop: $section.offset().top
        }, 500); // must remove 'easeInOutExpo' or include jQuery UI

        event.preventDefault();
    });
});

编辑：来自JQUERY DOCS：

缓解

.animate（）的其余参数是一个命名要使用的缓动函数的字符串。 缓动函数指定动画在动画中的不同点处进行的速度。 jQuery库中唯一的缓动实现是默认的，称为swing，以及一个以恒定速度进行的实现，称为线性。 使用插件可以使用更多的缓动函数，尤其是jQuery UI套件。

因此，除非您在页面上添加了jQuery UI，否则不能使用'easeInOutExpo'。