Question

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

我正在尝试创建一种“选择日期”日历，但是在旋转木马风格中，就像那些图像滑块一样。

用户点击日期后，<div>应滚动到中心，并更改CSS动画。

我发现这个图片滑块正是我需要的：http://opiefoto.com/articles/photoslider（底部的演示）

我想做的就是，取下大图像和播放/暂停按钮，稍微更改一下CSS，到目前为止，我已设法做到这一点：http://chadascinco.net/photoslider/

对毛刺敏锐的人可能已经注意到......当你点击一个缩略图，然后点击另一个，前一个保持其旧的高度，你仍然可以看到它像某种东西一样“轻弹”，迫使它回到那个高度。

这就是我的问题。

如果你使用萤火虫或类似东西进行检查，你会注意到它的高度达到了66px，但在此之后又回到了121px。

现在，对于一些奇怪的事情，如果我取消“顶部”值的变化，那么高度就会完美。它会增长并完全按照我的需要返回。但是，如果我把它放回去...该死的，我们去，高度故障。

我试图通过电子邮件联系作者，但已经过了3天，我没有回复。

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

负责的js是“photoslider.js”，如果你检查“FELIX Note”，你会在我做出任何改动的每个部分找到笔记。任何其他评论都是作者的原创。

过渡的工作线路从265到287。

如果我说的话令人困惑，我会很高兴更准确。

如果您还需要查看原始代码，可以在此处查看：http://chadascinco.net/photoslideroriginal

另外，如果你知道任何其他类似我需要的应用程序，我会非常感谢你知道。

再次感谢大家。

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

无论你做什么，如果你对活动和非活动div的 SECOND 调用都使用相同的CSS属性，它就会轻弹并导致这个小故障。我已经尝试改为“背景颜色”而不是高度，从黑色变为白色和向后变换。

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

Answer 1

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

由于这个库一次不期望多个动画，当你创建一个新动画时，它只是element.skel_animate_id = setInterval(.....，如果你跟着我，你会发现{{1}上的任何内容1}}之前（即图书馆对任何先前动画的计时器的唯一引用）在该作业之后丢失。

现在，有一个由计时器调用的步进函数，它负责识别动画何时结束，并停止计时器本身，但它通过调用skel_aimate_id来实现，这显然只会清除与最后一个动画属性相关的计时器。

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

编辑： Live demo of fix.

GUILTY SNIPPET

行[488-531]

clearInterval(element.skel_animate_id);

可能的解决方案

我将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); } } },作为一个数组，并存储每个间隔并引用一个动画属性，因此step函数指出要清除的间隔。

在SKEL.EFFECTS.Slide.animate

中

skel_animate_ids

然后在SKEL.EFFECTS.Slide.stop

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.step（第575行）

//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);
        }
    }

},

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

干杯

编辑：我等不及了，所以我鞭打了一个JSFiddle进行测试，是的，它适用于那些变化。 Check it out

EDIT2：纠正错字：在第一段代码中仍然引用了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变量相关联。这就是你试图模仿的功能。

jQuery app问题。这是一个小故障还是不正确的编码？

2 个答案: