简化jquery不起作用

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库实现是默认的，所谓的摇摆，以及一个进步以恒定的速度，称为线性。通过使用插件，最显着的是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.easeInBounce影响？

使用它这样的：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"); 
    }); 

}); 

希望它能帮助！