[英]Fade in an image and after the effect finishes, fade in another next to it
我了解SO的规则,我必须首先在类似的问题中搜索答案,但是该主题中没有一个得到我想要的东西。 我正在尝试使具有图像的div淡入,在完成该效果后,旁边会逐渐淡入另一个。 我很确定它必须使用jQuery回调来完成,但是我尝试过的一切似乎都没有用。
这是HTML:
<div class="w3-row">
<div class="w3-col s6 w3-center">
<img src="img/tuning.png" 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="img/tuning.png" class="responsive2">
<a href="lu-suspension.html">
<h1 class="center right">SUSPENSION</h1>
</a>
</div>
</div>
CSS很简单:.sensitive和.sensitive2这两个类的显示属性均为none。
这是jQuery:
<script type="text/javascript">
$(document).ready(function () {
$(".responsive").fadeIn(2500).removeClass("responsive", function() {
$(".responsive2").fadeIn(5000).removeClass("responsive2");
});
});
</script>
你的想法似乎是确定的,但检查你的代码再次,你有回调removeClass
,但它必须是fadeIn
。
$(".responsive").fadeIn(2500, function() {
//callback
}).removeClass("responsive");
大多数jquery动画函数都有两个参数:duration和complete。 您可以使用第二个参数来继续下一个动画,即:
$(function() {
$(".responsive").fadeIn(2500, function() {
$(this).removeClass("responsive");
$(".responsive2").fadeIn(5000, function() {
$(this).removeClass("responsive2");
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.