javascript - jQuery 淡出内容，然后连续淡入新内容

Question

我想在同一位置连续淡入淡出 2 段内容。目前淡入淡出有效，但内容位于其他内容下方，并且在加载文档时它们都可见。

简单来说，内容会一直在#fade1 和#fade2 之间切换。

HTML:

<section id="text-slider">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <p id="fade1">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
                <p id="fade2" style="opactiy:0">test</p>
            </div><!-- col -->
            <div class="col-md-4">
                <p></p>
            </div><!-- col -->
            <div class="col-md-4">
                <p></p>
            </div><!-- col -->
        </div><!-- row -->
    </div><!-- container -->
</section><!-- text slider -->

JS:

    $(document).ready(function () {

      // runs fade code for homepage content
      fadeThem();

}

    // fades content in and out on homepage
        function fadeThem() {
            $("#fade1").fadeOut(3000, function() {
                $("#fade2").fadeIn(2000, fadeThem());
                $("#fade2").fadeOut(2000, fadeThem());
                $("#fade1").fadeIn(2000, fadeThem());
            });
        }

Answer 1

你为什么不把你的代码放在:$( window ).load(function() {} ;

像这样:

    $( window ).load(function() {
        // -- Snipped -- //
        $(".right-image-crm").addClass('right-image-up');


        $(".left-image-crm").addClass("left-image-up");


        $(".center-image-crm").addClass("center-image-up");

        $(".loader").fadeOut(1000,function(){

}


        });