0

画像 (.tip-image) とそれらに添付されたテキスト (.tip-box) を回転させる jQuery の単純なスライダーがあります。テキスト（.tip-box）からアニメーションを削除して、次のアイテムに変更するとすぐに表示されるようにしたいのですが、アニメーションは画像に残します。

(function($) {
  $(document).ready( function() {
    $('#training-tips-slider a').click(function(e) {
      var $active = $('.training-tips-post.active');
      var $next = $(this.hash);
      $active.addClass('last-active');
      $active.removeClass('active');
      $next.addClass('active');
      $next.css({opacity:0}).animate({opacity:1}, 800, function() {$active.removeClass('last-active');})

      $('#training-tips-slider a').removeClass('active');
      $(this).addClass('active');
      e.preventDefault();
    });
    });

    var current = 1;
    function autoAdvance() {
        if( current==-1 )
            return false;
        $('#training-tips-slider a').eq(current%$('#training-tips-slider a').length).trigger('click',[true]);
        current++;
    }
    // The number of seconds that the slider will auto-advance:
    var changeEvery = 15;
    var itvl = setInterval( function() { autoAdvance() }, changeEvery*1000 );
})(jQuery);

CSS:

.training-tips-post {background: #fff; z-index: 8;}
.training-tips-post.last-active {z-index: 9;}
.training-tips-post.active {z-index: 10;}

HTML:

<div id="training-tips-post-1" class="training-tips-post active">
  <div class="tip-image">
    <img class="wp-post-image" height="220" width="680" src="path-to-my-image1.jpg">
  </div>

  <div class="tip-box">
    <h2>TIP HEADER 1</h2>
    <p class="tip-text">This a text for item number 1</p>
  </div>

</div> <!-- END of #training-tips-post-1 -->


<div id="training-tips-post-2" class="training-tips-post">
  <div class="tip-image">
    <img class="wp-post-image" height="220" width="680" src="path-to-my-image2.jpg">
  </div>

  <div class="tip-box">
    <h2>TIP HEADER 2</h2>
    <p class="tip-text">This a text for item number 2</p>
  </div>
</div>  <!-- END of #training-tips-post-2 -->

<div id="training-tips-post-3" class="training-tips-post">
<div class="tip-image">
<img class="wp-post-image" height="220" width="680" src="path-to-my-image3.jpg">
</div>

<div class="tip-box">
<h2>TIP HEADER 3</h2>
<p class="tip-text">This a text for item number 3</p>
</div>

</div>  <!-- END of #training-tips-post-3 -->

<!-- SLIDER -->
<ul id="training-tips-slider">
  <li><a href="#training-tips-post-1" title="Featuring: TIP 1" class="active">Spánek</a></li>
  <li><a href="#training-tips-post-2" title="Featuring: TIP 2" >Poslušnost psa</a></li>
  <li><a href="#training-tips-post-3" title="Featuring: TIP 3">Spánek</a></li>
</ul>
4

1 に答える 1

0

.training-tips-post画像とテキストの両方を含む完全な各divでコードがフェードしているようです。次の行を変更することで、画像をフェードインすることができます。

$next.find(".tip-image").css({opacity:0}).animate({opacity:1}, 800, function() {$active.removeClass('last-active');})

トランジションをスムーズにするために追加の調整が必要になる場合がありますが、テキストはすぐに表示されるはずです。

于 2012-07-28T22:09:49.357 に答える