Javascript jquery衰退的问题

我对jquery很陌生，在单击页码时尝试淡入/淡出图库中的页面。页码也应褪色为不同颜色，边框应淡入/淡出

我有两个问题。图像淡入/淡出在localhost和JSFIDLE上运行时有效，但在live上首次更改gallery页面时会出现问题。新页面并没有淡入，而是看起来好像根本没有动画。第一次单击后，它工作正常。这可以在这里看到（正如我提到的，这在JSFIDLE中不会发生）：

代码在这里，但我也将jquery粘贴到了下面：

我对页码周围的边框也有一些问题。在库中单击每个数字时，应该从当前数字中删除一个类，并将其添加到已单击的数字中，但这似乎没有发生。更改任何类的唯一时间是在单击返回到第1页时-在该页中，该类将从编号1中删除，但不会重新添加

代码（第3页看起来可能没有加载，但当前与第2页的图像相同）：

---

我知道这里有很多答案，但是有很多问题，所以我将在这里逐一介绍，我可以根据需要更新我的答案

没有必要在css中重复您的样式。类的意义在于，您可以在多个元素上使用同一个类。只需使用.gallery page之类的类，而不是复制.gallery\uuuuu page-1、.gallery\uuuuuu page-等的样式规则

图像太大了。您的一些图像超过20mb；加载这一页所提供的全部140mb数据花费了52秒。您可以减少图像大小/质量设置，但仍然可以提供一组好看的图像

无需存储jQuery选择器字符串，然后重复调用jQuery函数来访问该项

//bad
var thing = '.thing';
// later on calling this repeatedly
$(thing).addClass(...

// better
var thing = $( '.thing' );
// later on calling this repeatedly
thing.addClass(...

您的按钮类不起作用，因为超时在计划超时时不使用上下文，它在调用函数时使用上下文。上下文是指变量值的状态。特别是在您的js中，currentPageNumber设置为超时函数将选择的类，以将

所选

类添加到该类并将其从中删除。如果在timeout函数中更新了该变量，它的工作方式将更像您所期望的，但是我只使用带有延迟的css转换，而不是js timeout

您不需要将当前页面存储在javascript中的变量中。只需将.current或.active之类的类附加到dom中的活动元素。当您对点击做出反应时，您可以淡出所有页面，解析点击链接的id以获取页码，然后淡入新的当前页面。这将修复js错误，并使代码在添加更多页面时可重用

---

我认为淡入不起作用，因为jQuery在渲染之前不知道它淡入的元素的大小。您可以尝试为页面增加高度，看看这是否解决了fadein问题。

感谢您迄今为止的帮助-我只花了几天时间来构建此页面，因此没有时间讨论诸如减小图像大小之类的问题（对本地没有影响）。您不需要将当前页面存储在javascript>中的变量中，因此，为所有3个页码提供相同的类但不同的id，然后解析id并使用样式？我认为淡入不起作用，因为jQuery在呈现之前不知道它淡入的元素的大小>我认为是在（文档）之后使用pageTwo.hide（）。就绪意味着元素在被隐藏之前被呈现？这是错误的吗？我不确定加载的事情，但你可以通过设置图像高度来测试它

//bad
var thing = '.thing';
// later on calling this repeatedly
$(thing).addClass(...

// better
var thing = $( '.thing' );
// later on calling this repeatedly
thing.addClass(...