- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个光滑的 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 – 49 43 43</a>
<div class="contact-divider">
|
</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/
我想要显示正在加载的 .gif,直到所有内容都已加载,包括嵌入的 iframe。但是,目前加载 gif 会在除 iframe 之外的所有内容都已加载后消失。我怎样才能让它等到 iframe 也加载完毕
首先,这是我第一次接触 Angular。 我想要实现的是,我有一个通知列表,我必须以某种方式限制 limitTo,因此元素被限制为三个,在我单击按钮后,其余的应该加载。 我不明白该怎么做: 设置“ V
我正在尝试在我的设备上运行这个非常简单的应用程序(使用 map API V2),并且出于某种原因尝试使用 MapView 时: 使用 java 文件: public class MainMap e
我正在使用 Python 2.6、Excel 2007 Professional 和最新版本的 PyXLL。在 PyXLL 中加载具有 import scipy 抛出异常,模块未加载。有没有人能够在
我想做这个: 创建并打包原始游戏。然后我想根据原始游戏中的蓝图创建具有新网格/声音/动画和蓝图的其他 PAK 文件。原始游戏不应该知道有关其他网格/动画/等的任何信息。因此,我需要在原始游戏中使用 A
**摘要:**在java项目中经常会使用到配置文件,这里就介绍几种加载配置文件的方法。 本文分享自华为云社区《【Java】读取/加载 properties配置文件的几种方法》,作者:Copy工程师。
在 Groovy 脚本中是否可以执行条件导入语句? if (test){ import this.package.class } else { import that.package.
我正在使用 NVidia 视觉分析器(来自 CUDA 5.0 beta 版本的基于 eclipse 的版本)和 Fermi 板,我不了解其中两个性能指标: 全局加载/存储效率表示实际内存事务数与请求事
有没有办法在通过 routeProvider 加载特定 View 时清除 Angular JS 存储的历史记录? ? 我正在使用 Angular 创建一个公共(public)安装,并且历史会积累很多,
使用 Xcode 4.2,在我的应用程序中, View 加载由 segue 事件触发。 在 View Controller 中首先调用什么方法? -(void) viewWillAppear:(BOO
我在某些Django模型中使用JSONField,并希望将此数据从Oracle迁移到Postgres。 到目前为止,当使用Django的dumpdata和loaddata命令时,我仍然没有运气来保持J
创建 Nib 时,我需要创建两种类型:WindowNib 或 ViewNib。我看到的区别是,窗口 Nib 有一个窗口和一个 View 。 如何将 View Nib 加载到另一个窗口中?我是否必须创建
我想将多个env.variables转换为静态结构。 我可以手动进行: Env { is_development: env::var("IS_DEVELOPMENT")
正如我从一个测试用例中看到的:https://godbolt.org/z/K477q1 生成的程序集加载/存储原子松弛与普通变量相同:ldr 和 str 那么,宽松的原子变量和普通变量之间有什么区别吗
我有一个重定向到外部网站的按钮/链接,但是外部网站需要一些时间来加载。所以我想添加一个加载屏幕,以便外部页面在显示之前完全加载。我无法控制外部网站,并且外部网站具有同源策略,因此我无法在 iFrame
我正在尝试为我的应用程序开发一个Dockerfile,该文件在初始化后加载大量环境变量。不知何故,当我稍后执行以下命令时,这些变量是不可用的: docker exec -it container_na
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我刚刚遇到一个问题,我有一个带有一些不同选项的选择标签。 现在我想检查用户选择了哪些选项。 然后我想将一个新的 html 文件加载到该网站(取决于用户选中的选项)宽度 javascript,我该怎么做
我知道两种保存/加载应用程序设置的方法: 使用PersistentStore 使用文件系统(存储,因为 SDCard 是可选的) 我想知道您使用应用程序设置的做法是什么? 使用 PersistentS
我开始使用 Vulkan 时偶然发现了我的第一个问题。尝试创建调试报告回调时(验证层和调试扩展在我的英特尔 hd vulkan 驱动程序上可用,至少它是这么说的),它没有告诉我 vkCreateDeb
我是一名优秀的程序员,十分优秀!