javascript - 需要在屏幕调整大小时更改 div 输出和 javascript

Question

我有一个 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 个的代码？谢谢!

Answer 1

您好，我认为您应该根据不同的窗口宽度使用不同的条件，例如

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 类”或类似的东西