需要更改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();

​

这会一次淡出每个"top-3“部分。在移动端(屏幕大小调整)，我需要能够显示和淡出一个名字在同一时间。"#1胡安·巴勃罗·蒙托亚“，然后是"#2托尼·斯图尔特”，然后是“#3马克·马丁”。有没有办法做到这一点，因为我已经有了一次做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 ..with“或者类似的东西。