个人中心
gpt4 book ai didi

javascript - jQuery + slick slider : . on ('afterChange' ) 事件触发，但 div 的 .fadeTo(1) 有时在页面重新加载时不可见

转载 作者：行者123 更新时间：2023-11-28 03:32:11 33 4
gpt4 key购买 nike

我有一个光滑的 slider ，每张幻灯片的图像顶部都有文本。当当前幻灯片具有 .slick-active 类时，文本应淡入。然后，当幻灯片不再具有类 .slick-active 时，文本应该变得不可见，并且下一张幻灯片上的文本应该淡入，依此类推，每次 slider 更改当前幻灯片时。当页面第一次加载时，一切似乎都按预期正常工作。问题是，在页面重新加载时，或者如果访问另一个页面然后返回 slider 页面，第一张幻灯片上的文本会按预期淡入，但不会在其他幻灯片上淡入。似乎 .on('afterChange') 事件会触发，因为使用 Chrome 开发工具时可以看到 jQuery 通过 .fadeTo(1) 将不透明度从 0 更改为 1 > 但是，文本不可见。但如果重新加载足够多次，文本就会按预期淡入。此外，如果调整浏览器窗口的大小，则文本在特定浏览器尺寸下变得可见，但在其他浏览器尺寸下文本消失。对我来说，jQuery 本身似乎有些问题，但我不确定。

编辑:这种奇怪的行为仅在使用 Google Chrome 或 Opera 时才会发生(在 Opera 中，文本仅显示在第一张幻灯片上，即使这是第一次加载页面)，似乎在 Safari 和 Mozilla Firefox 中都能正常工作并符合预期。那么某种 Google Chrome/Opera + jQuery 错误吗？

如果有人可以提供帮助，我们将不胜感激!

HTML:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Lazzo</title>
        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="css/bars.css">
        <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
        <link rel="stylesheet" type="text/css" href="css/custom-slick.css">
        <link rel="stylesheet" type="text/css" href="css/animate.css">
        <link rel="stylesheet" href="https://use.typekit.net/jqi8pst.css">
    </head>

    <body>
        <div class="container">
            <header>                    
                <div class="white logotype">
                    <a href="index.html">
                        <svg class="logotype-is-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312.68 110.26"><path d="M19.91,91.14a2.38,2.38,0,1,0,0-4.75c-14.1,0-14.1-7.75-14.1-14v-70a2.38,2.38,0,1,0-4.76,0v70C1.05,78.49,1.05,91.14,19.91,91.14Z"/><path d="M55,51.78c-7.29,0-13.25,1.16-17.71,3.45C30.71,58.63,26.91,64.88,27.15,72c.24,7.3,4.85,13.75,12,16.85A41,41,0,0,0,55.6,91.94c6.92,0,15.92-.91,22-4.92a9.13,9.13,0,0,0,8.06,4.14,2.38,2.38,0,1,0,0-4.76c-3.3,0-5-1.92-5-5.71V46.26c0-7.1-4.37-12.77-12.29-16-13.7-5.54-30.34-1.57-37.28,5.62a2.38,2.38,0,0,0,.05,3.36,2.42,2.42,0,0,0,1.7.67,2.36,2.36,0,0,0,1.67-.73C41,32.51,56,30.4,66.61,34.69c3.48,1.41,9.32,4.78,9.32,11.57v5.52Zm21,30.5c-5.2,4.24-14.92,4.91-20.43,4.91a36.31,36.31,0,0,1-14.53-2.75c-5.47-2.36-9-7.21-9.17-12.65a13.25,13.25,0,0,1,7.59-12.33c3.78-1.94,9-2.93,15.54-2.93h20.9V80.69A13.57,13.57,0,0,0,76,82.28Z"/><path d="M97.45,33.69h39.09l-41,53.63a2.37,2.37,0,0,0,1.88,3.82h43.89a2.38,2.38,0,1,0,0-4.75H102.26l41-53.64a2.37,2.37,0,0,0-1.89-3.81H97.45a2.38,2.38,0,0,0,0,4.75Z"/><path d="M157.6,33.69h39.08l-41,53.64a2.37,2.37,0,0,0,1.9,3.81h43.88a2.38,2.38,0,1,0,0-4.75H162.4l41-53.64a2.37,2.37,0,0,0-1.9-3.81H157.6a2.38,2.38,0,1,0,0,4.75Z"/><path d="M262.85,10.6a49.83,49.83,0,0,0-21.28,94.9H2.38a2.38,2.38,0,1,0,0,4.75H262.85a49.83,49.83,0,0,0,0-99.66Zm.06,94.9h-.4a45.21,45.21,0,1,1,.4,0Z"/></svg>
                    </a>
                </div><!-- /logotype -->

                <div class="bars bars--slider">
                    <div class="bars-box">
                        <div class="white bars-inner">
                        </div><!-- /bars-inner -->
                    </div><!-- /bars-box -->
                </div><!-- /bars bars--slider -->
            </header>

            <nav class="menu">
                <ul>
                    <li>
                        <a href="cases.html">CASE</a>
                    </li>

                    <li>
                        <a href="about.html">OM</a>
                    </li>

                    <li>
                        <a href="contact.html">KONTAKT</a>
                    </li>
                </ul>

                <footer>
                    <div class="contact">
                        <a href="tel:+46500494343">0500 &ndash; 49 43 43</a>

                        <div class="contact-divider">
                            &nbsp;&verbar;&nbsp;
                        </div><!-- /contact-divider -->

                        <a href="mailto:info@lazzo.nu">info@lazzo.nu</a>
                    </div><!-- /contact -->
                </footer>
            </nav>

            <div class="fullscreen content-slider big">
                <div>
                    <div class="overlay">
                        <div class="heading-one">
                            <h3>Jönköpings Länstrafik</h3>

                            <h1>Världsnyheten i Värnamo</h1>

                            <a class="white" href="case.html">Se case</a>
                        </div><!-- /heading-one -->
                    </div><!-- /overlay -->

                    <img src="img/vasttrafik.jpg" alt="Västtrafik">
                </div>

                <div>
                    <div class="overlay">
                        <div class="heading-one">
                            <h3>Hotell Kungshamn</h3>

                            <h1>Omprofilering</h1>

                            <a class="white" href="case.html">Se case</a>
                        </div><!-- /heading-one -->
                    </div><!-- /overlay -->

                    <img src="img/hotellkungshamn.jpg" alt="Hotell Kungshamn">
                </div>

                <div>
                    <div class="overlay">
                        <div class="heading-one">
                            <h3>AH Automation</h3>

                            <h1>Robotmässa</h1>

                            <a class="white" href="case.html">Se case</a>
                        </div><!-- /heading-one -->
                    </div><!-- /overlay -->

                    <video autoplay loop muted>
                        <source src="video/ahautomation.mp4" type="video/mp4">
                    </video>
                </div>
            </div><!-- /fullscreen content-slider -->
        </div><!-- /container -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="js/custom-slick.js"></script>
        <script src="js/white-bars.js"></script>
        <script src="slick/slick.js"></script>
    </body>
</html>

jQuery:

$(document).ready(function(){
    $('.big').on('init', function(event, slick){
        $('.slick-active .heading-one').delay(500).fadeTo(300, 1);
    });

    $('.big').on('reInit', function(event, slick){
        $('.slick-active .heading-one').delay(500).fadeTo(300, 1);
    });

    $('.big').on('beforeChange', function(event, slick, currentSlide, nextSlide){
        $('.slick-active .heading-one').css('opacity', '0');
    });

    $('.big').on('afterChange', function(event, slick, currentSlide){
        $('.slick-active .heading-one').fadeTo(300, 1);
    });

    //slick
    $('.big').slick({
        autoplay: false,
        prevArrow: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.1 25.71" class="slick-prev"><polygon points="12.4,25.5 13.8,24.1 3,12.9 13.8,1.6 12.4,0.2 0.3,12.9 "/></svg>',
        nextArrow: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.1 25.71" class="slick-next"><polygon points="1.7,25.5 0.3,24.1 11.1,12.9 0.3,1.6 1.7,0.2 13.8,12.9 "/></svg>',
        fade: true,
        pauseOnFocus: false,
        pauseOnHover: false,
        speed: 700,
    });

    $('.small').slick({
        prevArrow: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.1 25.71" class="slick-prev"><polygon points="12.4,25.5 13.8,24.1 3,12.9 13.8,1.6 12.4,0.2 0.3,12.9 "/></svg>',
        nextArrow: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.1 25.71" class="slick-next"><polygon points="1.7,25.5 0.3,24.1 11.1,12.9 0.3,1.6 1.7,0.2 13.8,12.9 "/></svg>',
        pauseOnFocus: false,
        pauseOnHover: false,
        slidesToShow: 3,
        slidesToScroll: 1,
        speed: 700,
        responsive: [
            {
                breakpoint: 1114,
                settings: {
                    slidesToShow: 2,
                }
            },

            {
                breakpoint: 784,
                settings: {
                    slidesToShow: 1,
                }
            },
        ],
    });

});

最佳答案

我认为你可能有点过于复杂了；无需额外的 JavaScript 即可实现所需的行为:

.heading-one {
    opacity: 0;
    transition: opacity .3s;
}

.slick-active .heading-one {
    opacity: 1;
}

关于javascript - jQuery + slick slider : . on ('afterChange' ) 事件触发，但 div 的 .fadeTo(1) 有时在页面重新加载时不可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58081660/

33 4 0
文章推荐： javascript - 制作响应式组件烘干机
文章推荐： javascript - 如何防止div滚出页面
文章推荐： javascript - 设计一个无需事件即可提供数据的 VueJS 组件
文章推荐： javascript - 通过 Ajax (Wordpress) 加载内容后让 javascript 工作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com