jQuery fadeTo - 사용 방법

Question

처음에는 jQuery를 배우는 것에 익숙하지 않으며이를 사용하여 슬라이드 쇼를 만들려고합니다.

$(document).ready(function() { 
    $("#Slider li img").click(function() { 
     $("").fadeTo('slow',0); 
     $('#mainImg').attr('src',$(this).attr('src').replace('thumb/', '')); 
    }); 

    var imgSwap = []; 
    $("#Slider li img").each(function() { 
     imgUrl = this.src.replace('thumb/', ''); 
     imgSwap.push(imgUrl); 
    }); 
    $(imgSwap).preload(); 
}); 

$.fn.preload = function() { 
    this.each(function() { $('<img/>')[0].src = this; }); 
} 

그리고 내 div의 :

<div id="Slider"> 
    <img src="sliderImg/img_1.png" alt="" id="mainImg" /> 
    <ul> 
     <li><img src="sliderImg/thumb/img_1.png" alt="" /></li> 
     <li><img src="sliderImg/thumb/img_2.png" alt="" /></li> 
     <li><img src="sliderImg/thumb/img_3.png" alt="" /></li> 
     <li><img src="sliderImg/thumb/img_4.png" alt="" /></li> 
     <li><img src="sliderImg/thumb/img_5.png" alt="" /></li> 
     <li><img src="sliderImg/thumb/img_6.png" alt="" /></li> 
     <li><img src="sliderImg/thumb/img_7.png" alt="" /></li> 
     <li><img src="sliderImg/thumb/img_8.png" alt="" /></li> 
     <li><img src="sliderImg/thumb/img_9.png" alt="" /></li> 
    </ul> 
</div> 

는 내가하고 싶은 것은 이미지 사이의 전환을하게하는 것입니다 여기에

는 jQuery를합니다.
어떻게해야합니까? fadeTo() 함수를 사용하려고했지만 성공하지 못했습니다. 도움

Answer 1

에 대한

주셔서 감사합니다 $("").fadeTo('slow',0); 당신이 어떤 요소를 대상으로하지 않기 때문에, 작동하지 않을 수 있습니다.

$(this).fadeTo('slow', 0); 또는 다른 선택자를 사용할 수 있습니다.

Answer 2

fadeTo는 다른 요소로 페이드하는 데 사용되지 않으며 한 요소에 대해 다른 스타일로 페이드하는 데 사용됩니다.

한 요소를 퇴색시키고 다른 요소를 퇴색하여 이후의 작업을 수행 할 수 있습니다.

Answer 3

모든 이미지를 가져 와서 배열에 저장해야합니다. 첫 번째 메시지를 표시하십시오. 다음 배열을 클릭하면 (배열에서 한 단계 이동) 나머지를 숨 깁니다. 그런 다음. 나머지는 CSS입니다.

Answer 4

다른 답변은 코드의 문제점을 강조했지만 직접 슬라이드 쇼를 작성하는 대신 JQuery 용 슬라이드 쇼 플러그인을 사용해보십시오. 나중에 플러그인을 사용하면 효과를 더 쉽게 얻을 수 있습니다. 여기에 JQuery의 플러그인 웹 사이트에서 슬라이드 쇼 플러그인을 검색 할 수 있습니다. http://plugins.jquery.com/tag/slideshow/ Google에서 볼 수있는 "최고의 jquery 슬라이드 쇼 플러그인"목록이 많은 블로그가 있습니다.