jquery - 除非位置绝对，否则不正确地删除/添加类重新加载

Question

我创建了一个非常简单的 jquery 幻灯片，但是当一个类从事件图像中删除并放置到下一个时，我遇到了一个问题。

当图像位置是相对时:类被删除后，新图像会在幻灯片下方短暂地重新加载

当图像位置为绝对时:幻灯片的导航会损坏，不再是动态的!

Here is what it looks like when it's relative

Here is what it looks like when it's absolute

我该如何解决这个问题？

Answer 1

新图像出现在最后一个图像完全消失之前出现的相对方法接缝的问题，因此新图像跳到容器上。我将 sliderResponse 函数更改为:

function sliderResponse(target) {
  images.fadeOut(300).promise().done(function(){
  triggers.removeClass('selected').eq(target).addClass('selected');
  images.eq(target).fadeIn(300);          
  });
}

我使用了与 http://storeco.de/ 完全相同的代码, 只是改变了这个功能...

它在 chrome 上运行，我没有在其他浏览器上测试过，但你可以试试。

那是因为你有:

images.fadeOut(300).eq(target).fadeIn(300);
triggers.removeClass('selected').eq(target).addClass('selected');

因此，当您淡出时，您只是使用不透明度，图像的内容仍然存在，当您淡入新的时，它紧随其后，然后是 remove('selected') 和 addClass('selected') 进行跳跃。 ..如果你这样做:

 images.fadeOut(300).removeClass('selected').eq(target).fadeIn(300);
 triggers.removeClass('selected').eq(target).addClass('selected');

它也有效!