0

我在 jQuery 中有一个简单的滑块，它可以旋转图像（.tip-image）和附加到它们的文本（.tip-box）。我想从文本（.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 回答