相关疑难解决方法(0)

jQuery缓动函数而不使用插件

我正在寻找一个可以与jQuery一起使用的自定义缓动函数的在线列表.

我对使用插件不感兴趣,也不使用jQuery UI.

我发现下面有一个很好的小反弹,但我正在寻找其他几个,所以我可以有一些选择.

代替其他功能,简要解释这个功能如何运作和可能被修改将是非常棒的.谢谢!

例:

$.easing.custom = function (x, t, b, c, d) {
    var s = 1.70158; 
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
Run Code Online (Sandbox Code Playgroud)

编辑#1:

这是所有jQuery UI缓动函数的在线演示.来自UI的源函数由Jake在下面的正确答案中发布.

http://api.jqueryui.com/easings/


编辑#2:

事实证明,我上面发布的示例缓动函数与jQuery UI中的"easeInOutBack"完全相同.


编辑#3:

这里有一些免费下载的独立缓和方程式......

http://www.robertpenner.com/easing/

jquery easing-functions jquery-easing

76
推荐指数
3
解决办法
6万
查看次数

将 jQuery 缓动 easeInExpo 函数重写为纯 javascript 和 css

所以我有这个很棒的小代码块,我正在尝试将其重写为纯 JavaScript 和 CSS,而不使用 jQuery。

jQuery.extend(jQuery.easing,{
    easeInExpo: function (x, t, b, c, d) {
        return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
    }
}); 

var nset = false;
$('button#hmenu').click(function(){
    if(!nset){
        $('ul#nav').delay(35).slideDown(300,'easeInExpo');
        $('button#hmenu').addClass('active');
        nset = true;
    } else {
        $('ul#nav').slideUp(550);
        nset = false;
        $('button#hmenu').removeClass('active');
    }
})  
Run Code Online (Sandbox Code Playgroud)

我正在查看一些使用缓动的 CSS 过渡,但只是想知道有哪些选项?在我的代码中,我有一个向下滑动和向上滑动的缓动函数。这用于移动菜单导航的生产。

javascript css jquery

7
推荐指数
1
解决办法
576
查看次数