标签: jquery-easing

我正在寻找一个可以与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;
}

编辑#1:

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

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

编辑#2:

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

编辑#3:

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

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

如何修改这个jQuery缓动函数以产生一个不那么夸张的反弹？

$.easing.easeOutElasticSingleBounce = function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};

我正在寻找一个模拟这个的缓动函数:

http://sandbox.scriptiny.com/tinyslider2/

tinyslider2使用类似的功能,看起来像这样:

new Function(this.n+'.slide('+(i==1?t+(12*d):t+(4*d))+','+(i==1?(-1*d):(-1*d))+','+(i==1?2:3)+','+a+')')

但是我今天似乎无法理解数字,以便将tinyslider2方程符合jQuery缓动格式.如果有人能给我一个例子,我会非常感激.

UPDATE

这个等式非常接近:

$.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 …

使用此代码,我已经能够捕获鼠标滚轮移动并将其应用于水平滚动条而不是垂直默认值.

$('html').bind('mousewheel', function(event, delta) {
   window.parent.scrollBy(-120 * delta, 0);
   return false;
});

有什么方法可以将这个jQuery缓动动画添加到滚动运动中吗？

// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.extend( jQuery.easing, {
   easeInOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) 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;
   }
});

非常感谢你提前!

我的jQuery函数生成的动画很不稳定,我一直在寻找不同的SO解决方案,例如添加jquery.easing,但没有运气.问题是每个div中的iframe吗？

关于如何平滑动画的任何想法？我的基本切换功能是最好的方法吗？

JSFiddle: http ://jsfiddle.net/gwLcD/8/

基本标记在下面,并在页面上重复多次(每个"录像带"div之间有文本块):

 <div class="videotoggle">

    <p><h2 class="entry-title">View a few minutes of the (title) video </h2></p>

    <div class="videoblock">

    <iframe width="560" height="315" src="http://www.youtube.com/embed/????????"
    frameborder="0" allowfullscreen></iframe>

    </div></div>

功能:

$(document).ready(function(){
$(".videoblock").hide();  //closes all divs on first page load
$(".entry-title").click(function() {
    $this = $(this);  //this next code only allows one open div at a time
    $content = $this.closest('.videotoggle').find(".videoblock");
    if (!$this.is('.active-title')) {
        $('.active-title').removeClass('active-title');
        $this.addClass('active-title');
        $(".videoblock:visible").slideToggle(400);  //slide toggle
        $content.slideToggle(400);
    }
});
});

我必须同时对一个对象执行两个动画.
出于多种原因,我想将jQuery用于垂直动画,将CSS3用于水平动画.

在jQuery方面,swing缓动效果很好:

swing: function (a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}

我正在寻找一种在CSS3过渡中表达这种缓动功能的方法.

如果它是不可能的,我正在寻找一个宽松的功能(例如贝塞尔曲线)是最相似  到  swing
,可用于双方在jQuery和CSS3.请包含指向任何所需插件的链接.

示例
首先,这是我的代码和问题:http:
//www.nathanstpierre.com/MBX/showoff.html

问题
所以我看到的是,当您单击左侧的按钮时,窗口会滚动到相应的标题.在每个浏览器中,但Firefox(包括...... IE 喘息)这是非常顺利的.但是,如果减小窗口的高度,它将在所有计算机上变得平滑.我已经在多台计算机和IE 7-8,谷歌浏览器,Safari和Firefox 3.5上试过了这个.我已经消除了页面上的所有图形和颜色,所以这些都不是问题.我已经摆脱了跟随你的侧边栏,那不是它.

理论
我认为jQuery缓动插件会计算你需要去的距离,然后按照指定的持续时间单位划分它需要移动的像素数(比如300像素超过30毫秒,所以10px/ms) .每个其他浏览器似乎都能够实现平滑过渡,但是窗口滚动事件提供的粒度可能不足以让Firefox显得流畅吗？或者我可能使用了错误的缓动插件或错误的设置.

代码

$("#sidenav a").click(function () {
        $("#sidenav a").animate({'color':'#6d6d6d'},{"duration":400});
        $(this).animate({"color":"#fff"},{"duration":400});
        clicktarget=$(this).attr("href");
        $("html, body").animate({scrollTop: $(clicktarget).offset().top},{"duration":300,"easing":"easeout"});
        return false;
      });

逻辑

为sidenav onClick上的每个标记添加一个事件监听器.这将获得文档中元素的offset().顶部,其ID与该链接的href属性相同,然后从当前scrollTop动画到该元素的offset().top.逻辑是合理的,并且在每个浏览器中都能顺利运行,除了Firefox ......据我所知.

PLEA

我究竟做错了什么？这是一个错误吗？

谢谢!

更新

好吧,我不能凭良心选择这里提出的任何答案,因为他们都没有真正解决这个问题,所以如果你跟随这个选择你最喜欢的和赏金将去最高的那个票.

问题似乎是Firefox a)呈现透明度和b)处理滚动事件的方式.可能具有足够的处理器能力这是一个无问题,但令我难过的是IE(所有浏览器)能够在劣质硬件上呈现这一点.我将向Mozilla提出这个问题,看看他们是否有任何关于它的话题.

如需额外的装饰,免费提供以下服务:

透明度
没有透明度

编辑:所以问题已得到解答,但现在我无法选择它.任何人都知道这是怎么回事？

最终更新 已经过了足够的时间,他们让我得到赏金,所以我选择了正确的答案.看起来像box-shadow和一些其他效果会导致firefox中的一些滚动问题,因为它们呈现的方式.FF 4.0 +处理得更好,但有些计算机仍有问题.对于实现CSS3的人来说,这是一个很好的选择:在所有浏览器上测试交互,看看性能成本是否合理.

我有一个三页的注册表单,分为三个选项卡,都是在bootstrap上开发的.我想在验证当前页面后将一页翻到另一页.这是我的意思的工作演示.我试着实现这个演示但是代码太不同了我无法正确复制.所以这里展示了我到目前为止所拥有的东西:bin.如您所见,第二个和第三个选项卡被禁用,直到第一个选项卡得到正确验证.选择一个选项并单击继续后,我希望它滑入第二个选项卡.我试过这样的事情:

$(".tab-content div").animate({left: "0px"}, { duration: 350, easing: 'easeInOutCirc' });

但这没用,所以我该怎么做？

我正在为div设置动画，但是我想对该动画赋予某种效果，所以我尝试了这样

$('#slider').stop().animate({"margin-right": '0'}, 'slow','easeOutBounce');

easeOutBounce对我不起作用。我做错了吗？但是除此之外，所有的工作。

我也尝试了jquery 效果如下

$('#slider').stop().animate({"margin-right": '0'});
$('#slider').effect( "bounce", "slow" );

但是，如果我使用效果，甚至第一行动画功能都无法正常工作

如何通过动画实现反弹效果？

我刚从StackExchange上读到了这个问题和答案,但解决方案对我不起作用.

这不起作用:

 $("#top_slide").slideUp(5000, "easeInOutQuart");

但这确实有效:

$("#top_container").animate({height: headerHeight}, 5000, "easeInOutQuart");

我正在使用最新的jQuery-1.10.2.js.

有什么想法吗？

//

我添加了这样的缓动插件,它在jsfiddle中工作:

<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.easing.compatibility.js"></script>
<script src="js/jquery.easing.min.js"></script>

脚本代码是这样的:

 $("#top_slide").slideUp({ duration: 5000, easing: "easeInOutQuart" });

我仍然得到这个错误:

Uncaught TypeError: Object #<Object> has no method 'easeInOutQuart'
rr.run jquery.js:9216
l jquery.js:8914
x.fx.timer jquery.js:9511
er jquery.js:8981
a jquery.js:9305
x.extend.dequeue jquery.js:3948
(anonymous function) jquery.js:3991
x.extend.each jquery.js:657
x.fn.x.each jquery.js:266
x.fn.extend.queue jquery.js:3984
x.fn.extend.animate jquery.js:9316
x.fn.(anonymous function) jquery.js:9442
(anonymous function) playingWithjQuery.php:38
c jquery.js:3048
p.fireWith jquery.js:3160
x.extend.ready jquery.js:433
q 

提前致谢!

//

我把它改成了一个div,这是我的html,这里是 …

我有一个我认为简单的jquery,但它变成了痛苦.

slideUp部分工作正常,但它不会向下滑动......虽然如果我取出slideUp的缓动部分,它确实有效.

有任何想法吗？

   $('.clickableDiv').click(function() {
    $("<div style='background-image:url(../images/properties/images/bk-01.jpg); width:965px; height:398px;'><img src='../images/properties/text/bk.gif' width='965' height='398' /></div>").prependTo("div.myDiv2");

    $("div.myDiv1").slideUp(800, 'easeInOutSine', function() {
        $("div.myDiv2").slideDown(800, 'easeInOutSine');
    });    
});

myDiv2最初是隐藏的.

改变这条线是有效的,这就是为什么我发现它有点奇怪......

$("div.myDiv1").slideUp(800, function() {

我在Mac上使用Safari和firefox来测试它...

我正在使用jQuery插件进行自定义Easing(jQuery Easing v1.3 -http://gsgd.co.uk/sandbox/jquery/easing/),为我的jQuery Tools可滚动实例添加自定义缓动,如下所示:

$(".historyScrollable").scrollable({ easing:"easeInOutCubic"}).navigator();

我希望也能使用jQuery Easing插件与.animate函数一起使用

我试过像这样使用它:

$(this).find('div').stop().animate({'marginLeft':'-280px'},200,easeInOutCubic);

但它说没有定义"easeInOutCubic".我正在做的是什么,而我的语法错了？我也试过使用specialEasing,但似乎也没有用:

$(this).find('div').stop().animate({'marginLeft':'-280px'},{duration:200, customEasing:{'marginLeft':'easeInOutCubic'}});

我试图使用jQuery缓动函数easeInBounce,我看到这个错误:

ReferenceError: easeInBounce is not defined

我正在使用jQuery 1.8,Easing 1.3和jQuery UI 1.8.23.

这是我的代码

HTML:

 <div id="loading">
<h2 class="textcenter">Loading...</h2>
 <img id="loading-image" class="center" src="/images/ajax-loader.gif"  />
</div>
<div id="content-wrap" class="hide">
    <div class="img-center">
    <img style="z-index:10" src="/bird-bg.jpg" />
    </div>
    <img class="hide" id="bird" src="/bird.png" />
</div>

CSS:

#bird{
position:absolute;
left:300px;
top: 0px;
z-index:999;
}

.hide {display: none;}

JS:

var $j = jQuery.noConflict();
   $j(window).load(function() {
        $j('#loading').fadeOut('slow', function() {
  $j("#content-wrap").fadeIn("slow", function() {
      $j("#bird").slideDown({ duration: 1000, easing: easeInBounce});
       });
   });
});