提问人：Jeremy C 提问时间：11/12/2023 最后编辑：Jeremy C 更新时间：11/12/2023 访问量：29
需要在 Swiper 幻灯片中的第一张幻灯片才能淡入
Need first slide in Swiper slideshow to fade in
问：
所有后续幻灯片都平滑地淡入和淡出，但第一张幻灯片的不透明度为 100。
如何使第一张幻灯片也淡入？
JavaScript的
$(document).ready(function () {
// Disable the Ajax cache for IE
$.ajaxSetup({ cache: false });
// Highlighting the selected bottom menu
$("ul#menu1 a").click(function () {
$("ul#menu1 a").removeClass("up");
$(this).addClass("up");
});
// Hamburger menu
$('.menu-btn').click(function () {
$('.responsive-menu').toggleClass('expand');
});
$(".menu-item-has-children").append("<div class='open-menu-link open'>+</div>");
$('.menu-item-has-children').append("<div class='open-menu-link close'>-</div>");
$('.open').addClass('visible');
$('.open-menu-link').click(function (e) {
var childMenu = e.currentTarget.parentNode.children[1];
if ($(childMenu).hasClass('visible')) {
$(childMenu).removeClass("visible");
$(e.currentTarget.parentNode.children[3]).removeClass("visible");
$(e.currentTarget.parentNode.children[2]).addClass("visible");
} else {
$(childMenu).addClass("visible");
$(e.currentTarget.parentNode.children[2]).removeClass("visible");
$(e.currentTarget.parentNode.children[3]).addClass("visible");
}
});
});
function selcat(categorie) {
$('#SERVICES').hide();
$('#STAIRS').hide();
$('#RAILINGS').hide();
$('#FENCING').hide();
$('#WATER_AND_FIRE').hide();
$('#CUSTOM_METALWORKS').hide();
$('#ABOUT').hide();
$('#' + categorie).show();
}
AI 建议的代码什么也没做。
此处的相关文件
答：
0赞
berkobienb
11/12/2023
#1
首先，确保第一张幻灯片的初始不透明度设置为 0。这可以直接在HTML中使用内联CSS完成，也可以通过向第一张幻灯片添加类来完成。例如：
<div class="slide" style="opacity: 0;">...</div>
或者，如果您更喜欢使用类：
.initial-hidden {
opacity: 0;
}
然后在您的 HTML 中：
<div class="slide initial-hidden">...</div>
在 jQuery $（document）.ready 函数中，为第一张幻灯片添加淡入效果。您可以使用该方法或对不透明度进行动画处理。例如：.fadeIn()
$(document).ready(function () {
// ... your existing code ...
// Fade in the first slide
$('.initial-hidden').animate({ opacity: 1 }, 1000); // Adjust the duration (1000 ms here) as needed
});
这将在指定的持续时间（在本例中为 1000 毫秒）内将第一张幻灯片的不透明度从 0 到 1 进行动画处理。
评论
0赞
Jeremy C
11/13/2023
<<div class=“slide initial-hidden”在哪里>...</div>> 去？
评论