jQuery가 링크에 애니메이션을 적용하지 않습니다.

Question

링크를 사용하여 이미지 슬라이더 플러그인의 페이드 효과를 올바르게 얻으려고합니다.

현재 슬라이더는 올바르게 페이드되지만 링크가 변경되지 않습니다. 첫 번째 이미지는 Google.com &에 연결되어야합니다. 두 번째 링크는 Hotmail.com에 연결되어 있어야하지만 둘 다 Hotmail.com에만 연결됩니다 (마지막 이미지에 대한 링크로, 이는 많은 경우에도 마찬가지입니다. 사용하는 이미지).

I는 .animate({opacity:0}}) & 1을 사용하고 페이드 등 여기를 달성하는 애니메이션 효과 것 선 (72, 각각 215 & 216)이다 :

$(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1); 

$(this.slides).stop().animate({opacity:0}, { 
     duration: this.settings.duration, 
     easing:this.settings.easing 
}); 
$(this.slides).eq(index).stop().animate({opacity:1}, { 
     duration: this.settings.duration, 
     easing:this.settings.easing 
}); 

자료 :http://pastebin.com/9JwaM9tg

은

테스트 사이트 : 도움이 될 수 있습니다 사람에게http://matthewruddy.com/demo

감사합니다 나 밖으로. 정말 감사합니다. 표시되지 않은 상태

Answer 1

당신은 여전히 ​​불투명도가 0 당신이 li가 완전히이 후 현재 보이는 이미지가 제대로 연결 할 수 있도록해야 숨겨져 너무 display: none을 설정해야 도달 할 때 표시되는 그래서 li의 불투명도를 설정하는 .

$(this.slides).css({'opacity':0, 'display':'none'}).eq(this.currentNo).css({'opacity':1, 'display':'block'}); 

$(this.slides).stop().animate({opacity:0}, { 
    duration: this.settings.duration, 
    easing:this.settings.easing, 
    complete:function(){ 
     $(this).css({'display':'none'}); 
    } 
}); 

$(this.slides).eq(index).stop().css('display','block').animate({opacity:1}, { 
    duration: this.settings.duration, 
    easing:this.settings.easing 
});