jQuery 应用程序问题。这是一个小故障还是不正确的编码？

Question

我遇到了一个相当简单但恼人的问题。

我正在尝试创建一种“选择日期”日历，但采用轮播风格，就像那些图像滑块一样。

用户单击日期后，

应滚动到中心，并更改其 CSS、设置动画。

我找到了这个图像滑块，这正是我所需要的： http://opiefoto.com/articles/photoslider（底部演示）

我想做的就是去掉大图像和播放/暂停按钮，并稍微更改一下CSS，到目前为止，我已经成功了这样做： http://chadascinco.net/photoslider/

那些对故障有敏锐洞察力的人可能已经注意到了那......当您单击一个缩略图，然后单击另一个缩略图时，前一个保持其旧高度，但是，您仍然可以看到它“轻弹”，就像有什么东西迫使它回到原来的高度。

这就是我的问题。

如果您使用 firebug 或类似的东西进行检查，您会注意到高度变为 66px，但之后又回到 121px。

现在，对于一些奇怪的事情，如果我去掉“顶部”值的变化，高度就完美了。它完全按照我的需要生长和回归。但如果我把它放回去……该死，我们就这样了，高度故障。

我尝试通过电子邮件联系作者，但三天过去了，我还没有收到回复。

在这里我请求大家分享知识，我是 JavaScript 和 jQuery 的新手，所以这可能也是我的代码中的问题。我只是尝试使用基本的编程逻辑。

负责的 js 是“photoslider.js”，如果您检查“FELIX Note”，您会在我进行任何更改的每个部分中找到注释。其他评论均来自作者原创。

过渡有效的行是从 265 到 287。

如果我说的任何内容令人困惑，我很高兴能更准确。

如果你们还需要查看原始代码，可以在这里查看：http://chadascinco.net/photoslideroriginal

另外，如果您知道任何其他可以满足我需要的应用程序，我将非常感激。

再次感谢大家。

品牌新闻编辑：我发现了一个有趣的事实：如果你检查我提到的行，你会注意到 3 个动画调用。

无论您做什么，如果您将相同的 CSS 属性放在活动和非活动 div 的 SECOND 调用上，它就会闪烁并导致此故障。我尝试更改为“背景颜色”而不是高度，从黑色更改为白色并向后更改。

发生的事情是这样的：当我加载页面时，只有活动页面是黑色的。好的。但是当我点击另一个时，这个变成黑色，而上一个试图变成白色，但被迫再次变成黑色。我想知道，为什么只有第二个电话？如果这是第一个，或者最后一个，或者每一个，好吧，但是……只有第二个？诡异的。

Answer 1

嘿，我遇到问题了。问题是这个库并不期望您一次使用多个动画。初始化动画的函数 SKEL.EFFECTS.Slide.animate 在动画对象中创建一个名为 skel_animate_id 的字段，它实际上是为执行动画而设置的计时器的 id。

由于这个库不希望一次有多个动画，所以当您创建一个新动画时，它只会执行 element.skel_animate_id = setInterval(.....)，如果您关注我，您就会发现会意识到之前 skel_aimate_id 上的任何内容（即库对任何先前动画计时器的唯一引用）在该分配之后都会丢失。

现在，有一个由计时器调用的步骤函数，位于 中。负责识别动画何时结束，并停止计时器本身，但它是通过调用clearInterval(element.skel_animate_id);来实现的，这显然只会清除与最后一个动画属性相关的计时器。

长话短说，当您调用第二个属性的动画时（在第一个属性结束之前），您会留下一个打开的计时器，该计时器会继续“动画”第一个属性（即将其设置为最终值）

。编辑： 修复的现场演示。

有罪片段

行[488 -531]

SKEL.EFFECTS.Slide = {
counter: 0,
fps: 50,

//handles the animation from an attribute to an attribute
animate: function(element,cssAttribute,from,to,duration,transition){

    if(element.css('display') != 'block'){
        element.skel_old_display = element.css('display');
    }

    //if there isn't a default transition set one
    if(!transition){
        transition = SKEL.Transitions.quadOut;
    }

    //cancel any current animation

    // FELIX Note: I've commented this because when we had 3 transitions on the same element, this function would make only the first one to work.
    //SKEL.EFFECTS.Slide.stop(element);

    var startTime = new Date().getTime();

    //IE doesn't support arguments, so make a function that explicitly calls with those arguments
    element.skel_animate_id = setInterval(function(){
        SKEL.EFFECTS.Slide.step(element,cssAttribute,from,to,duration,startTime,transition);
    },(1000/SKEL.EFFECTS.Slide.fps));

    return element.skel_animate_id;
},

//cancels any animation event
stop: function(element){
    //console.log(this,element,element.skel_animate_id);
    //console.log(element.skel_animate_id);
    if(element.skel_animate_id){
        clearInterval(element.skel_animate_id);
        element.skel_animate_id = 0;
        if(element.skel_old_display){
            element.css('display',element.skel_old_display);
        }
    }

},

可能的解决方案

我将 skel_animate_ids 作为数组，并存储每个间隔以及对动画属性的引用，因此步骤函数现在可以清除哪个间隔。

在 SKEL.EFFECTS.Slide.animate

if (!element.skel_animate_ids){
    element.skel_animate_ids = new Object();
}

//IE doesn't support arguments, so make a function that explicitly calls with those arguments
element.skel_animate_ids[cssAttribute] = setInterval(function(){
            SKEL.EFFECTS.Slide.step(element,cssAttribute,from,to,duration,startTime,transition);
        },(1000/SKEL.EFFECTS.Slide.fps));

return element.skel_animate_ids[cssAttribute];

然后在 SKEL.EFFECTS.Slide.stop

//cancels any animation event
stop: function(element,attribute){
    if(element.skel_animate_ids[attribute]){
        clearInterval(element.skel_animate_ids[attribute]);
        delete element.skel_animate_ids[attribute];
        if(element.skel_old_display){
            element.css('display',element.skel_old_display);
        }
    }

},

和 SKEL.EFFECTS.Slide.step （第 575 行）中

if(finished){
    SKEL.EFFECTS.Slide.stop(element,cssAttribute);
}

我认为应该这样做，但我无法在浏览器中真正测试它。如果我的代码不太工作，我一定错过了一些东西，但我仍然确信这就是问题所在，你只需要弄清楚如何解决它（或更改库=D）。你只需尝试我的建议，让我知道它是如何运作的。

干杯

编辑：我等不及了，所以我用 JSFiddle 来测试，是的，它适用于这些更改。 查看一下。

编辑2：更正了拼写错误：在代码的第一位仍然引用 skel_animate_id 而不是 skel_animate_ids。

Answer 2

在你急于从滑块中删除功能的过程中，如果你能原谅我的语言，你基本上就毁掉了它：

/* var sliderCaption = $(document.createElement('div'));
sliderCaption.addClass('photoslider_caption');

sliderDiv.append(sliderCaption);

var sliderNav = $('#'+key+' .photoslider_nav').get(0);
if(sliderNav != null){
     //remove it
     $(sliderNav).remove();
} */

sliderNav = $(document.createElement('div'));
sliderNav.addClass('photoslider_nav');

语法荧光笔应该已经告诉你出了什么问题。你注释掉了应用程序设计中关键变量的定义。

至少尝试一下，让所有内容都连接到那里的 sliderNav 变量。这就是您试图模仿的功能。