Question

我试图使用名为easeInBounce的缓动jQuery函数，但它无法正常工作。我已经搜索了所有内容，并且所有页面都说我已经将{easing:'easeInBounce'}放在这里，但它不起作用。

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>

<div>Push!</div>
<input type="text">
<input type="text" class="middle">
<input type="text">

<script>
    $( "div" ).ready(function() {
        $( this ).css({
            borderStyle: "inset",
            cursor: "wait"
        });
        $( "input" ).slideDown( {easing: 'easeInBounce'}, 1000, function() {
            $( this )
                    .css( "border", "2px red inset" )
                    .filter( ".middle" )
                    .focus();
            $( "div" ).css( "visibility", "hidden" );
        });
    });

</script>

正如您所看到的，我已经更改了点击，并在加载页面时将.ready加载效果。

这不起作用，我不知道该怎么做。

由于

Answer 1

jQuery库中唯一的缓动实现是默认的，称为swing，以及一个以恒定速度进行的实现，称为线性。使用插件可以使用更多的缓动函数，尤其是jQuery UI套件。

您还需要加载jQuery UI - http://api.jqueryui.com/easings/

Answer 2

它不起作用，因为easeInBounce函数不是jQuery库的一部分。 swing和linear是jQuery库中包含的唯一缓动函数。

你可以包含jQueryUI或jQuery缓动插件，但是这些可能有点过分，所以你可以直接在你的代码中放入任何相关的缓动函数。

$(document).ready(function() {

    $.easing.easeInBounce = function (x, t, b, c, d) {
        return c - $.easing.easeOutBounce (x, d-t, 0, c, d) + b;
    };
    $.easing.easeOutBounce = function (x, t, b, c, d) {
        if ((t/=d) < (1/2.75)) {
            return c*(7.5625*t*t) + b;
        } else if (t < (2/2.75)) {
            return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
        } else if (t < (2.5/2.75)) {
            return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
        } else {
            return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
        }
    };

    // now you can use it

    ....

请参阅：jQuery easing functions without using a plugin

Answer 3

为什么不使用.animate()效果jquery.easing.min.js的http://jsfiddle.net/csdtesting/d88z6ur5/？

使用它：{{3}}

.easeInBounce

希望它有所帮助！

缓解Jquery不起作用

3 个答案: