jquery - jquery fadeIn 和 FadeOut 之间不需要的间隙
问题描述
我目前在我的应用程序中有一个手动构建的滑块,它与 jQueryfadeIn
和fadeOut
. 但是,在幻灯片之间,它会在白色幻灯片之间闪烁背景图像一瞬间(这非常分散注意力)。
如何摆脱幻灯片之间的时间间隔?
HTML 如下所示:
<div class="hero-image-row-index">
<div class="hero-image-outer-index text-center">
<div class="hero-image-inner-index text-center">
<%= image_tag 'Background 1.jpg', id: "hero-image-index", class: "hero-image-index", alt: "Beautiful Sunset over Pelican Hills Golf Course and Ocean Cliffs" %>
<%= image_tag 'Background 1.jpg', id: "hero-image-index-2", class: "hero-image-index", style: "display: none", alt: "Beautiful Sunset over Pelican Hills Golf Course and Ocean Cliffs" %>
</div> <!-- hero-image-inner -->
</div> <!-- hero-image-inner -->
</div> <!-- row -->
<div id="overlap-hero-image-index">
<div class="slideshow-container">
<div class="slides">
<div class="slide text-center" id="slide-1">
<h1 class="font-accent color-white mt-5 mb-4" style="font-size: 52px">Genetic Golf</h1>
<h2 class="color-white">We don't guess, we test to find what works best for you!</h2>
</div> <!-- slide 1 -->
<div class="slide text-center" id="slide-2" style="display: none; border-bottom: thick #567e3a solid; background-color: white">
<h2 style="color: black; padding-top: 20px; padding-bottom: 20px">The greatest golfers of all time have different swings.<br>None of them have the perfect swing!</h2>
<%= image_tag 'ss01.jpg' %>
<%= image_tag 'ss02.jpg' %>
<%= image_tag 'ss03.jpg' %>
</div> <!-- slide 2 -->
<div class="slide text-center" id="slide-3" style="display: none; border-bottom: thick #567e3a solid; background-color: white">
<h2 style="color: black; padding-top: 20px; padding-bottom: 20px">The great ones have a swing that matched their body and mind.<br>They unlocked their genetic golf code.</h2>
<%= image_tag 'ss04.jpg' %>
<%= image_tag 'ss05.jpg' %>
<%= image_tag 'ss06.jpg' %>
</div> <!-- slide 3 -->
<div class="slide text-center" id="slide-4" style="display: none; border-bottom: thick #567e3a solid; background-color: white">
<h2 style="color: black; padding-top: 20px; padding-bottom: 20px">Genetic Golf is a true paradigm shift in learning golf.<br>We run specific tests to find what works best for you!</h2>
<%= image_tag 'ss07.jpg' %>
<%= image_tag 'ss08.jpg' %>
<%= image_tag 'ss09.jpg' %>
</div> <!-- slide 4 -->
<div class="slide text-center" id="slide-5" style="display: none; border-bottom: thick #567e3a solid; background-color: white">
<h2 style="color: black; padding-top: 20px; padding-bottom: 20px">A golf swing has over 2 billion options.<br>Genetic Golf takes out the guess work.</h2>
<%= image_tag 'ss10.jpg' %>
<%= image_tag 'ss11.jpg' %>
<%= image_tag 'ss12.jpg' %>
</div> <!-- slide 5 -->
<div class="slide text-center" id="slide-6" style="display: none; border-bottom: thick #567e3a solid; background-color: white">
<h2 style="color: black; padding-top: 20px; padding-bottom: 20px">You can spend a lifetime searching for your swing<br>or take a simple Genetic Golf evaluation.</h2>
<%= image_tag 'icon_yourid.png' %>
<%= image_tag 'icon_dynamics.png' %>
<%= image_tag 'icon_TEMP_yourcode.jpg' %>
</div> <!-- slide 6 -->
<div class="slide text-center" id="slide-7" style="display: none">
<h2 style="color: white; padding-top: 30px; font-weight: bold">Unlock your personal Genetic Golf code today!</h2>
<h2 style="font-size: 40px; color: white; font-weight: bolder; padding-top: 10px; padding-bottom: 20px">Find your game!<br>Great shots, great days,<br>and great memories!</h2>
</div> <!-- slide 7 -->
</div> <!-- slides -->
<div class="controller">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div> <!-- controller -->
</div> <!-- slideshow container -->
</div> <!-- overlap hero image -->
jQuery是这样的:
<script>
jQuery(document).ready(function($) {
// Hides all images except for one, the one is given by an
// index. Also updates the controller.
function showSlide(index) {
$('.slides .slide').each(function(i) {
if (i == index) {
$(this).delay(400).fadeIn(500);
} else {
$(this).fadeOut(500);
}
});
var spans = $('.controller span').removeClass('active');
spans.eq(index).addClass('active');
}
// Show only the first element and set an interval to
// continue to cycle through elements.
var index = 0;
showSlide(index);
var intervalFunc = function() {
index = index >= $('.slides .slide').length ? 0 : index + 1;
showSlide(index);
};
var interval = setInterval(intervalFunc, 6000);
// Handle clicks which will reset the interval to each time.
$('.controller span').click(function() {
// Set the current picture.
index = $(this).index();
showSlide(index);
// Reset the interval
clearInterval(interval);
interval = setInterval(intervalFunc, 6000);
});
});
</script>
谁能帮我摆脱奇怪的差距?我对 jQuery 还是很陌生,所以我的故障排除尝试都没有奏效。
解决方案
您是否尝试过background-color
给予<div>
withid overlap-hero-image-index
或<div>
with class slideshow-container
。这不会消除fadeIn
或的差距,fadeOut
但会解决您在白人之间显示背景的问题。
#overlap-hero-image-index{
background-color: white;
}
// OR
.slideshow-container{
background-color: white;
}
推荐阅读
- asp.net-core - 使用整数用户 ID 扩展 EF Core Identity UserStore
- php - Easy admin bundle:如何访问 MenuItem::linktoRoute 第四个参数的参数数组
- python - 如何从数组中获取两个 int 数的值
- lua - Lua脚本如何调用/调用zenity或notify-send?
- certificate - 是否可以确定消息是否已由同一链中的证书签名?
- r - R Simmer - 根据队列大小在罐子之间重新分配资源
- json - 告诉 VS Code 从目录解析 JSON Schema 路径
- sql - 从 SQL 查询中排除组合
- c++ - 在 Oracle DB OCCI 界面中使用 UPDATE
- jfrog - jFrog Artifactory 开源不支持多LDAP活动目录认证