0

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

从下面的脚本中，您可以看到我有一个名为 5 的 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>

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

4

1 回答 1

2

我想你很接近。两件事情：

  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 文档：

缓和

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

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

于 2012-06-22T19:08:20.820 回答