jQuery的：如何更改滑块动画

我有一个简单的滑块在jQuery旋转图像（.tip图像）和文本附加到他们（.tip盒）。我想从文本（.tip-box）中删除动画，以便在切换到下一个项目时立即显示动画，但将动画保留在图像上。jQuery的：如何更改滑块动画

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

来源

2012-07-28 Joudicek Jouda

看来你的代码是在每个完整的.training-tips-post格同时包含图像和文本褪色。您可以尝试通过改变这条线的图像，在短短的衰落：

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

一些额外的调整可能是必要的平滑过渡，但你的文字应该立即变得可见。

来源

2012-07-28 22:09:49 spacious

这就是我的想法和我做的，但我无法“平滑”过渡（完成它）。我用$ next.children（“。tip-image”）做到了。（在这种情况下，find（）和children（）之间的区别是什么？）图像相互之间没有变化，但是从图像-1到白色再到图像-2。你能帮忙吗？ – 2012-07-28 23:42:58

有几种方法可以解决这个问题。它闪烁白色的原因是.training-tips-post上的背景颜色。我需要在提供工作解决方案之前加载代码，让我知道你是否仍然没有想到它 - – spacious 2012-08-03 19:35:03

不，我没有弄明白自己。我想图像闪白，但不是文本 - 这就是为什么我插入.training-tips-post {background：#fff;}但是文本应该完全没有动画，没有闪动的白色（只需更改为新文本）。 – 2012-08-05 22:57:07

jQuery的：如何更改滑块动画

回答

相关问题