Облегчение Jquery не работает

Question

Я пытаюсь использовать функцию JQuery замедления, называемую easeInBounce, но она не работает. У меня был поиск все об этом, и все страницы говорят, что я должен поставить {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 ослабление функций без использования плагина

Answer 3

Почему бы вам не использовать .animate() с .easeInBounce эффект jquery.easing.min.js?

Используйте это так: http://jsfiddle.net/csdtesting/d88z6ur5/

$("div").ready(function () {

    $(this).css({
        borderStyle: "inset",
        cursor: "wait"
    });

    //$('#showme').fadeIn("easeInBounce");
    $('#showme').animate({
        top: '-=100px'
    }, 500, 'easeOutBounce', function () { // Animation complete.
        $(this)
            .css("border", "2px red inset")
            .filter(".middle")
            .focus();
        $("div").css("visibility", "hidden");
    });

});

Надеюсь, поможет!