4

我正在开发一个手风琴插件，除了一个错误之外，它大部分都已完成，在上滑/下滑的前几个步骤中，手风琴比预期高 1 像素，导致视觉错误。我将其范围缩小到 slideUp 动画的第一步没有做任何事情的事实，我不知道为什么。这是一个例子：

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);
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style='height: 100px; background-color: red;' id='div1'>
</div>

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

http://jsfiddle.net/hbh6U/

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

4

2 回答 2

1

我不知道这个问题是从哪里来的......周日早上......没有太多时间去调查......但我根据你的小提琴找到了两种可能的解决方案......

第一个是将这两个 DIV 包装在另一个带有溢出的 DIV 中：隐藏。

第二个......可能更合适的是仅在其中一个 div 上调用“slide”函数，然后在回调中更新第二个的大小，如下所示：

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").height(100-  $("#div1").height());
}});

还要删除 div2 样式中的“disply:none”...

它解决了这个问题，并且在我看来是一个更优雅的解决方案......调用两个单独的动画函数可能会导致可能的同步问题......希望有帮助......

于 2013-09-29T12:38:20.780 回答
1

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

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

这会导致第二个 div（从 1px 到 100px）的动画短于第一个 div（从 0 到 100px）的动画。

要解决此问题，请修改您的 step 函数，如下所示：

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

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

如果动画实际上从 1 开始，这将中断，但那时会有其他方法来处理它。

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

于 2013-09-29T14:50:12.800 回答