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的：如何更改滑塊動畫

回答

相關問題