JQueryサイクルが正しく機能しない

Question

私は最初のスライドが表示された後に機能をしようとしています。私は基本的に各スライドの後に同じ機能を実行したいが、私の2番目のスライドはまだ静止している。何もして退色したりして来ている。ここで

は私の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アニメーションのために動作しますが、上の2番目のスライドは動作していません。

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

これで、意図したとおりに別のスライドに変更を加えることができます。

Answer 2

containerResize: falseからcontainerResize: trueに変更してください。

参照のデモはhere