我有一个 div,我用它来一次淡入和淡出 3 个名字,但是当在移动设备上查看时,我需要让它一次只淡入和淡出一个名字。我当前的代码如下所示,
<div class="pre-pwr-rankings">
<div class="grid-container">
<div class="grid-80 mobile-grid-100 pwr-rankings">
<section class="top-3">
<div class="grid-33 mobile-grid-100 pwr-rankings-driver">
<p class="pwr-ranking-name">#1 Juan Pablo Montoya</p>
</div>
<div class="grid-33 mobile-grid-100 pwr-rankings-driver">
<p class="pwr-ranking-name">#2 Tony Stewart</p>
</div>
<div class="grid-33 mobile-grid-100 pwr-rankings-driver">
<p class="pwr-ranking-name">#3 Mark Martin</p>
</div>
</section>
<section class="top-3">
<div class="grid-33 mobile-grid-100 pwr-rankings-driver">
<p class="pwr-ranking-name">#4 Juan Pablo Montoya</p>
</div>
<div class="grid-33 mobile-grid-100 pwr-rankings-driver">
<p class="pwr-ranking-name">#5 Tony Stewart</p>
</div>
<div class="grid-33 mobile-grid-100 pwr-rankings-driver">
<p class="pwr-ranking-name">#6 Mark Martin</p>
</div>
</section>
<section class="top-3">
<div class="grid-33 mobile-grid-100 pwr-rankings-driver">
<p class="pwr-ranking-name">#7 Juan Pablo Montoya</p>
</div>
<div class="grid-33 mobile-grid-100 pwr-rankings-driver">
<p class="pwr-ranking-name">#8 Tony Stewart</p>
</div>
<div class="grid-33 mobile-grid-100 pwr-rankings-driver">
<p class="pwr-ranking-name">#9 Mark Martin</p>
</div>
</section>
</div>
<div class="grid-20 mobile-grid-100">
<section class="pwr-rankings-link">
<p>FAN SUBMITTED<br />
POWER RANKINGS</p>
<a>CLICK HERE TO HAVE YOUR SAY</a>
</section>
</div>
</div>
</div><!-- END OF PRE POWER RANKINGS -->
用于淡化名称的 javascript 是,
<script>
function fadeContent() {
$(".pwr-rankings .top-3:hidden:first").fadeIn(500).delay(3000).fadeOut(500, function () {
$(this).appendTo($(this).parent());
fadeContent();
});
}
fadeContent();
这会一次淡出每个“前 3”部分。在移动设备(屏幕调整大小)上,我需要一次只能显示和淡出一个名字。 “#1 Juan Pablo Montoya”,然后是“#2 Tony Stewart”,然后是“#3 Mark Martin”。有没有什么办法可以做到这一点,因为我已经有了一次可以执行 3 个的代码?谢谢!
最佳答案
您好,我认为您应该根据不同的窗口宽度使用不同的条件,例如
var wid = $(window).width();
if(wid < 767){
//for mobile
$('.top-3').each(function(i) {
(function(test) {
setTimeout(function() {
$(test).addClass('animation');
},(i*1500)+1500);
})(this);
});
}
else{
//for desktop
}
..有了这个,如果你想让 div 一个一个地淡出,那么你可以使用“setTimeout 类”或类似的东西
关于javascript - 需要在屏幕调整大小时更改 div 输出和 javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33397326/