Js：每次在部分内滚动并返回幻灯片部分时，使 div 出现在所有幻灯片中

Question

我为我的网页使用全页插件和滑块。

每次用户滚动页面或更改滑块时，我都会在滑块中显示 div 动画。但是当我更改幻灯片时，而不是滚动页面并返回到幻灯片部分，div 消失了。

查找问题：

刷新页面，在部分内滚动，div 出现在幻灯片中
向下滚动期间的部分，向上...
回到幻灯片部分，用箭头换幻灯片，div出现在第二张幻灯片也是
问题：再次滚动页面并 return 到第二张幻灯片，您可以看到div消失了

如果有全页回调的解决方案，那就太好了，如果没有，任何其他解决方案都可以接受。

JS:

$('#fullpage').fullpage({
   scrollBar: true,
  scrollingSpeed: 300,
  touchSensitivity: 5,
  paddingTop: '52px',
  sectionSelector: '.section-content',
  slideSelector: '.slide',
  afterLoad: function (anchorLink, index, slideIndex) {

  if (index == 2) {
    $("#section1").find('.features-img').eq(0).addClass('show-zoom');
    $('#section1').find('.features-img').eq(slideIndex).addClass('show-zoom');
        }
        },
  onLeave: function (anchorLink, index, slideIndex) {
   if (index == 2) {
   $("#section1").find('.features-img.show-zoom').eq(0).removeClass('show-zoom');
   $('#section1').find('.features-img.show-zoom').eq(slideIndex).removeClass('show-zoom');
                    }
                },
afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
   if (index == 2) {
      $("#section1").find('.features-img.show-zoom').removeClass('show-zoom');
      $('#section1').find('.features-img').eq(slideIndex).addClass('show-zoom');
                    }
                }

            });

Css:

.features-img {
  position: relative;
}
.zoom-img{
  -webkit-transform: scale3d(0, 0, 0);
  transform: scale3d(0, 0, 0);
  opacity: 0;
  border: 4px solid #00b8e6;
  border-radius: 50%;
  position: absolute;
  right: -80px;
  bottom: -50px;
  width: 300px;
  height: 300px;
}
.show-zoom .zoom-img {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  overflow: hidden;
  transition: transform 0.8s cubic-bezier(0.42, 0.58, 0.58, 1) 0s, opacity 0.8s linear 0s;
  opacity: 1;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.75);
}

在这里查看：https://jsfiddle.net/maaqms8s/4/

Answer 1

问题出在 eq(0)，它仅在第一张幻灯片上添加和删除 class，但您需要在 current 幻灯片上 add/remove。当前滑块上已有 active class，因此您可以使用它。

只需稍微修改一下您的代码，问题就会得到解决。

    if (index == 2) {
$("#section1").find('.slide.active').find('.features-img').addClass('show-zoom');
$('#section1').find('.features-img').eq(slideIndex).addClass('show-zoom');
 }
  if (index == 2) {
     $("#section1").find('.slide.active').find('.features-img').removeClass('show-zoom');
 $('#section1').find('.features-img.show-zoom').eq(slideIndex).removeClass('show-zoom');
}

其他一切正常。

Js：每次在部分内滚动并返回幻灯片部分时，使 div 出现在所有幻灯片中

Js: Make a div appear in all slides each time scrolling within sections and returning to slide section

html

javascript

css

jquery

fullpage.js