我理解 SO 的规则,我必须首先在类似问题中搜索答案,但该主题中没有一个得到我正在寻找的内容。我正在尝试制作一个上面有图像的 div 淡入,在完成该效果后,另一个效果会在它旁边淡入。我很确定它必须通过 jQuery 回调来完成,但我尝试过的所有方法似乎都不起作用。
这是 HTML 和 jQuery:
$(document).ready(function() {
$(".responsive").fadeIn(2500).removeClass("responsive", function() {
$(".responsive2").fadeIn(5000).removeClass("responsive2");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="w3-row">
<div class="w3-col s6 w3-center">
<img src="https://picsum.photos/id/237/100" class="responsive">
<a href="lu-sound.html">
<h1 class="center left">SOUND</h1>
</a>
</div>
<div class="w3-row">
<div class="w3-col s6 w3-center">
<img src="https://picsum.photos/id/1062/100" class="responsive2">
<a href="lu-suspension.html">
<h1 class="center right">SUSPENSION</h1>
</a>
</div>
</div>
CSS 很简单: .responsive 和 .responsive2 这两个类的显示属性均为 none。
最佳答案
你的想法似乎没问题,但是再次检查你的代码,你有removeClass
的回调,但它必须是fadeIn
的回调。
$(".responsive").fadeIn(2500, function() {
//callback
}).removeClass("responsive");
关于javascript - 淡入图像,效果完成后,淡入旁边的另一个图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40516361/