jQuery : 슬라이더 애니메이션을 변경하는 방법

Question

이미지 (.tip-image)와 텍스트 (.tip-box)를 회전시키는 jQuery의 간단한 슬라이더가 있습니다. 텍스트 (.tip 상자)에서 애니메이션을 제거하여 다음 항목으로 변경할 때 즉시 표시되도록하고 이미지에 애니메이션을 유지합니다.

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

Answer 1

그것은 당신의 코드는 이미지와 텍스트를 모두 포함하는 각 완전한 .training-tips-post 사업부에 퇴색되어 나타납니다.

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

몇 가지 추가 비틀기는 전환을 부드럽게 할 필요가있을 수 있지만, 텍스트를 즉시 볼이되어야 : 당신은이 라인을 변경하여 이미지의 페이딩 시도 할 수 있습니다.