jQuery Easing function not working here

Question

File Reference(Master Page):

    <script src="JavaScript/jquery-1.10.2.min.js"></script>
    <script src="JavaScript/jquery-ui.min.js"></script>
    <script src="JavaScript/JavaScript.js" type="text/javascript"></script>

HTML

<a href="#bookmark1" class="rightLinks">Go to 50s</a>
<a id="bookmark1" class="title">50s</a>

Code in JavaScript.js file

 $(".rightLinks").click(function () {
    var id = $(this).attr('href');
    $('html,body').animate({ scrollTop: (($(id).offset().top) - 30) }, 300, "easeOutCubic");
});

when i remove 'easeOutCubic' it works perfectly:

 $(".rightLinks").click(function () {
    var id = $(this).attr('href');
    $('html,body').animate({ scrollTop: (($(id).offset().top) - 30) }, 300");
});

But why not with the easing function?

Answer 1

add this library jquery.easing.min.js :

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript">
</script>

add with your libraries:

<script src="JavaScript/jquery-1.10.2.min.js"></script>
<script src="JavaScript/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript">
</script>
<script src="JavaScript/JavaScript.js" type="text/javascript"></script>

A demo of easing

Answer 2

You must need to add reference of jQuery UI 1.10 in your master page, that's it!

You can download it from here http://jqueryui.com/download/