JQuery的周期不工作的权利

Question

我试图做我的第一张幻灯片后的功能显示。我基本上想在每张幻灯片后都做同样的功能，但是我的第二张幻灯片只是静止不动。绝非褪色或未来。

这里是我的JQuery

$("#slideshow").cycle({ 
      fx: 'scrollHorz', 
      pager: '#slideshow-nav', 
      speed: 600, 
      timeout: 7000, 
      pauseOnPagerHover: true, 
      containerResize: false, 
      slideResize: false, 
      fit: 1, 
      before: beforeSlide, 
      after: afterSlide 
     }); 

     function beforeSlide() { 
      $("#slideText").css('padding-left', '0px'); 
      $("#slideText").css('opacity', '0'); 
     } 

     function afterSlide() { 
      $("#slideText").animate({ opacity: 1, paddingLeft: '+=100px'}, 600); 
     } 

，这里是我的html

<div id="slideshow" class="slides"> 
    <div class="slide" style="background-image: url('slideOne.jpg'); background-color: #e3d7bd;"> 
     <div id="slideText"> 
      <h1>asdf</h1> 
      <br /> 
      <p>asdf</p> 
      <p>asdf</p><br /> 
      <a href="" class="started">Get started today</a> 
     </div> 
    </div> 

    <div class="slide" style="background-color: #fff;"> 
     <img class="slideTwoImage" src="slideTwoKid.png"></img> 
     <div id="slideText"> 
      <h1>Test.</h1> 
      <br /> 
      <p>asdf</p> 
      <p>asdf</p><br /> 
      <a href="" class="started">Get started today</a> 
     </div> 
    </div> 
    <!-- <div class="slide" style="background-image: url('slideTwo.jpg'); background-color: #fff; display: none;"></div> 
    <div class="slide" style="background-image: url('slideThree.jpg'); background-color: #000; display: none;"></div> --> 
</div> 

它适用于第一slide..the动画文本，但在第二张幻灯片不起作用。

Answer 1

我想通了。您必须以不同的方式命名before和after函数中的元素。

我让他们都命名#slideText，你可以在函数告诉。只要将它们命名为单独。

  $("#slideshow").cycle({ 
      fx: 'scrollHorz', 
      pager: '#slideshow-nav', 
      speed: 600, 
      timeout: 7000, 
      pauseOnPagerHover: true, 
      containerResize: true, 
      slideResize: false, 
      fit: 1, 
      before: beforeSlide, 
      after: afterSlide 
     }); 

     function beforeSlide() { 
      $("#slideText").css('padding-left', '0px'); 
      $("#slideText").css('opacity', '0'); 
      $("#slideTextTwo").css('padding-left', '0px'); 
      $("#slideTextTwo").css('opacity', '0'); 
     } 

     function afterSlide() { 
      $("#slideText").animate({ opacity: 1, paddingLeft: '+=100px'}, 600); 
      $("#slideTextTwo").animate({ opacity: 1, paddingLeft: '+=100px'}, 600); 
     } 

因此，现在我可以按照我的意图对单独的幻灯片进行更改。 2号滑仍未显示

Answer 2

变化containerResize: false到containerResize: true那么它应该工作。

观看演示here