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();

这使每个＆＃34; top-3＆＃34;一节一节。在移动设备上（屏幕调整大小）我需要能够一次显示和淡化一个名称。＆＃34;＃1 Juan Pablo Montoya＆＃34;然后＆＃34;＃2 Tony Stewart＆＃34;然后＆＃39;＃3 Mark Martin＆＃34;。有没有办法做到这一点，因为我已经有代码一次做3个？谢谢！

Answer 1

嗨我认为你应该根据不同的窗口宽度使用不同的条件

/home/example/uploaded

..如果你想让div逐渐淡出你可以使用“setTimeout classes”或类似的东西

需要更改div输出和屏幕上的javascript调整大小

1 个答案: