Question

我对jquery还是很陌生，并且在单击页码时尝试淡入/淡出画廊的页面。页码也应淡入不同的颜色，边框应淡入/淡出。

我对此有2个问题。图像的淡入/淡出在localhost和jsfiddle上有效，但在实时播放时，第一次更改图库页面时会出现问题。而不是渐渐淡入新页面，它看起来好像根本没有动画。第一次单击后，它可以正常工作。可以在这里看到（正如我提到的，这在jsfiddle中不会发生）：https://intellidesign.000webhostapp.com/gallery.html

代码在这里，但我也粘贴了下面的jquery：https://jsfiddle.net/adamjroberts91/xpvt214o/524699/

页码周围的边框也有问题。在图库中单击每个数字后，应该从当前数字中删除一个类，并将其添加到被单击的那个类中，但这似乎没有发生。更改所有类的唯一时间是单击返回第1页-从1上删除该类，但不重新添加。

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

// Add the class names for each gallery to variables
const pageOne = '.gallery__page-1';
const pageTwo = '.gallery__page-2';
const pageThree = '.gallery__page-2';

//Add the class names for pagination numbers to variables
const pageNumberOne = '.gallery__pagination-number-1';
const pageNumberTwo = '.gallery__pagination-number-2';
const pageNumberThree    = '.gallery__pagination-number-3';

//Set the selected page and pagination to page 1
let currentPage = pageOne;
let currentPageNumber = pageNumberOne;

//Fade out the current page and fade in the new one
//Change color/outline of pagination numbers to show page selected
$(document).ready(() => {
    $(pageTwo).hide();
    $(pageThree).hide();
    $(pageNumberOne).click(() => {
        $(currentPage).fadeOut('slow', () => {
            $(pageOne).fadeIn('slow');
        });
        currentPage = pageOne;
        setTimeout(() => {
            $(pageNumberOne).addClass('gallery__pagination-number-selected');
            $(currentPageNumber).removeClass('gallery__pagination-number-selected');
        }, 500);
        currentPageNumber = pageNumberOne;
    });
    $(pageNumberTwo).click(() => {
        $(currentPage).fadeOut('slow', () => {
            $(pageTwo).fadeIn('slow');
        });
        currentPage = pageTwo;
        setTimeout(() => {
            $(pageNumberTwo).addClass('gallery__pagination-number-selected');
            $(currentPageNumber).removeClass('gallery__pagination-number-selected');
        }, 500);
        currentPageNumber = pageNumberTwo;
    });
    $(pageNumberThree).click(() => {
        $(currentPage).fadeOut('slow', () => {
            $(pageThree).fadeIn('slow');
        });
        currentPage = pageThree;
        setTimeout(() => {
            $(pageNumberThree).addClass('gallery__pagination-number-selected');
            $(currentPageNumber).removeClass('gallery__pagination-number-selected');
        }, 500);
        currentPageNumber = pageNumberThree;
    });
});

Answer 1

我知道这里有很多答案，但是有很多问题，所以我将在这里逐步解决，我可以根据需要更新答案。

无需在CSS中重复您的样式。类的重点是可以在多个元素上使用同一类。只需使用.gallery-page之类的类，而不是复制.gallery__page-1，.gallery__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设置为超时函数将选择向其添加selected类并将其从中删除的类。如果在超时功能中更新了该变量，它的工作方式将更像您期望的那样，但是id只需使用具有延迟的css过渡而不是js超时即可。

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

我认为淡入效果不起作用，因为jQuery在渲染之前不知道其淡入的元素的大小。您可以尝试在页面上增加一个高度，看看是否可以解决渐变问题。

jQuery褪色问题

1 个答案: