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

}


        });

Answer 2

尝试使用.fadeToggle()

＆＃13;

$(document).ready(function() {
  var p = $("p[id^=fade]");
  function fadeThem() {
    return p.fadeToggle(3000, function() {
      fadeThem()
    });
  }
  fadeThem();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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="display:none">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 -->

＆＃13;

Answer 3

工作守则（JS小提琴）：http://jsfiddle.net/nfdebmen/4/

此代码中可以包含任意数量的PlaceHolders。我做了4。

＆＃13;

var _toggle = {
    
  totalNodes: null,
  lastNode: 0,
    
  duration: 1000,
    
  init: function () {
  
    _toggle.totalNodes = $(".toggle").length;
      
    _toggle.next();
  
  },
    
  next: function () {
  
    var nextNode = _toggle.lastNode + 1;
      
    if (nextNode >= _toggle.totalNodes) {
      
      nextNode = 0;
      
    }
      
    //
      
    $(".toggle:eq(" + _toggle.lastNode + ")").fadeOut(_toggle.duration, function () {
    
      $(".toggle:eq(" + nextNode + ")").fadeIn(_toggle.duration);
        
      _toggle.next();
    
    });
      
    _toggle.lastNode = nextNode;
      
  }
    
}

$(document).ready(function () {

  _toggle.init();

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="text-slider">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <p class = "toggle active">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
        <p class = "toggle" style = "display: none;">test</p>
        <p class = "toggle" style = "display: none;">Ahsan</p>
        <p class = "toggle" style = "display: none;"><a href = 'http://aboutahsan.com' target = "_blank">http://aboutahsan.com</a></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 -->

＆＃13;

jQuery淡出内容，然后不断淡化新内容

3 个答案: