javascript – jQuery向上滑动线性宽松第一步什么也没做

2019年7月21日 182次阅读

所以,我正在开发一个手风琴插件,除了一个bug之外,它主要是完成的,对于slideUp / slideDown的前几个步骤,手风琴比它的意图高1px,造成视觉错误.我已经把它缩小到这样一个事实,即slideUp动画的第一步没有做任何事情,我无法弄清楚为什么.这是一个例子

HTML

<div style='height: 100px; background-color: red;' id='div1'>
</div>

<div style='height: 100px; background-color: blue; display: none;' id='div2'>
</div>

JS

console.log('Start');
var diff = 0;
var upNow = 100;
var downNow = 0;
$.fx.interval = 1000;
var duration = $.fx.interval * 100;
$("#div1").slideUp({ easing: 'linear', duration: duration, step: function(now)
{
    if(now != 0 && now > 90)
    {
        console.log("Slide Up: " + now);
        upNow = now;
    }
}});

$("#div2").slideDown({ easing: 'linear', duration: duration, step: function(now)
{
    if(now != 0 && now < 10)
    {
        downNow = now;
        diff = 100 - (upNow + downNow);
        console.log("Slide Down: " + now);
        console.log("Slide Difference:" + diff);
    }
}});

http://jsfiddle.net/hbh6U/

问题是我需要这些是同步的,我无法弄清楚它们为什么不是,或者如何让它们同步.我有一个想法是跳过slideDown动画的第一步,但我不知道该怎么做.有没有人有任何想法,或以前遇到过这个错误？

谢谢,加雷斯

最佳答案 问题归结为jQuery的内部defaultPrefilter方法中的这一行：

tween.start = prop === "width" || prop === "height" ? 1 : 0;

这会导致第二个div(从1px到100px)的动画比第一个div(从0到100px)的动画短.

要解决此问题,请修改步骤函数,如下所示：

function linearStep(now, animation){
    var animationStart = animation.start;
    if (animationStart === 1){
         animationStart = 0;   
    }
    animation.now = (animation.end - animationStart ) * animation.pos + animationStart;
}

它通过使用固定的animationStart进行相同的计算来覆盖计算的now值,该值为0而不是1.

如果动画实际上从1开始,这将会中断,但是还有其他方法可以处理它.

并排小提琴：http://jsfiddle.net/Nd3w2/3/

点赞