Fatal编程技术网
  • javascript/
  • Javascript jQuery+；光滑的滑块：.on（'；afterChange'；）事件激发，但div的.fadeTo（1）有时在页面重新加载时不可见

Javascript jQuery+；光滑的滑块：.on（'；afterChange'；）事件激发，但div的.fadeTo（1）有时在页面重新加载时不可见

javascript jquery google-chrome

Javascript jQuery+；光滑的滑块：.on（'；afterChange'；）事件激发，但div的.fadeTo（1）有时在页面重新加载时不可见,javascript,jquery,google-chrome,opera,slick.js,Javascript,Jquery,Google Chrome,Opera,Slick.js,我有一个光滑的滑块，每个幻灯片上的图像顶部都有文本。当当前幻灯片的class.slick处于活动状态时，文本应淡入。然后，当幻灯片不再具有类.slick active时，文本应变为不可见，并且下一张幻灯片上的文本应淡入，依此类推，每次滑块更改当前幻灯片时。当页面第一次加载时，一切似乎都正常工作，正如预期的那样。问题是，在重新加载页面时，或者如果一个人访问另一个页面，然后返回到滑块页面，第一张幻灯片上的文本会按预期淡入，但其他幻灯片上的文本不会淡入。看起来好像触发了.on（'afterChange

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

编辑：只有在使用Google Chrome或Opera（在Opera中，即使是第一次加载页面，文本也只会出现在第一张幻灯片上）时，这种奇怪的行为才会发生，而且在Safari和Mozilla Firefox中都是正常的。那么，谷歌Chrome/Opera+jQuery的一些bug

如果有人能帮忙，我将不胜感激

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>


拉佐

    

  • 

    • 

  • 

    • 

  • 

    • 


&韦巴尔；
Jönköpings Länstrafik
Världsnyheten i Värnamo
昆森酒店
OMPROFILLING
啊自动化
机器人摩萨
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,
                }
            },
        ],
    });

});

$（文档）.ready（函数（）{
$（'.big'）。on（'init'，函数（事件，光滑）{
美元（‘.浮油活跃.航向一’）。延迟（500）。fadeTo（300，1）；
});
$（'.big'）。on（'reInit'，函数（事件，光滑）{
美元（‘.浮油活跃.航向一’）。延迟（500）。fadeTo（300，1）；
});
$（'.big'）.on（'beforeChange'，函数（事件、滑动、当前滑动、下一滑动）{
$（'.slick-active.heading-one'）.css（'opacity'，'0'）；
});
$（'.big'）.on（'afterChange'，函数（事件、平滑、当前幻灯片）{
美元("浮油活跃,航向一").法德托(300,1);；
});
//光滑的
美元（“.big”）。光滑({
自动播放：错误，
前箭头：“”，
下一行：''，
是的，
暂停焦点：错误，
pauseonhaver:false，
速度:700,，
});
$（'.small'）。光滑({
前箭头：“”，
下一行：''，
暂停焦点：错误，
pauseonhaver:false，
幻灯片放映：3，
幻灯片滚动：1，
速度:700,，
响应：[
{
断点：1114，
设置：{
幻灯片放映：2，
}
},
{
断点：784，
设置：{
幻灯片放映：1，
}
},
],
});
});
我想你可能有点过于复杂了；无需额外的JavaScript即可实现所需的行为：

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

.slick-active .heading-one {
    opacity: 1;
}
我想你可能把它复杂化了一点；无需额外的JavaScript即可实现所需的行为：

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

.slick-active .heading-one {
    opacity: 1;
}
我确实尝试了你的建议，但不幸的是，那不起作用。。。只有第一张幻灯片显示文本，但是文本不会在第一张幻灯片上淡入。而在其他幻灯片上，文本根本没有显示出来。我认为单靠css是不可能实现这种行为的。我认为这是可能的——这是你想要的行为吗？再试一次，它可以在Safari和Firefox中使用，但不能在Chrome和Opera中使用。。。。奇怪的第一张幻灯片上的文字也需要淡入，最好稍微延迟一点，以便图像完全可见一段时间，然后文字淡入。我确实尝试了你的建议，但不幸的是，这不起作用。。。只有第一张幻灯片显示文本，但是文本不会在第一张幻灯片上淡入。而在其他幻灯片上，文本根本没有显示出来。我认为这种行为不可能用css实现