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'。