jQuery img src animation with fade

Question

페이드 인/아웃 애니메이션을 사용하여 매 4.6 초마다 img 요소의 이미지 소스를 변경하는 애니메이션을 만들려고합니다. 여기

내 코드입니다 :

var cng = false; 
 
function change(){ 
 
    var imgs = ['https://cdn.pbrd.co/images/JmrLKd7hq.jpg', 
 
       'https://cdn.pbrd.co/images/Jmtd8EfhI.jpg']; 
 
    $('img').fadeOut("slow", function(){ 
 
    $(this).attr('src', cng ? imgs[0] : imgs[1]); 
 
    $(this).fadeIn("slow", change()); 
 
    cng = !cng; 
 
    }); 
 
} 
 
$(document).ready(function(){setInterval('change()', 4600);});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 

 
<img src="https://cdn.pbrd.co/images/JmrLKd7hq.jpg" />

이가 예상 결과 아닙니다 (표시 및 기타 사초를 기다리는 붉은 이미지를 기다릴 실행 조각을 클릭)에서 볼 수 있듯이 하지만 어떻게 고칠 수 있을지 모르겠다. ...

나를 도와 줄 수 있습니까?

Answer 1

다음은 문제를 해결해야합니다. 이미지가 무한정 배열되도록 지원하는 기능이 확장되어 있으므로 두 가지로만 제한되지 않습니다. 나는 배열 자체에 두 개의 외부 변수와 배열을, 그리고 다른 하나는 0 인덱스 배열을 기반으로하는 애니메이션의 시작점으로 전체 함수를 래핑했습니다. 코드를 분해하려면

$().ready({ 
 
var currentImageIndex = 0 
 
var imgs = ['https://cdn.pbrd.co/images/JmrLKd7hq.jpg', 
 
       'https://cdn.pbrd.co/images/Jmtd8EfhI.jpg'] 
 
function changeImage() { 
 
if (currentImageIndex > (imgs.length-1)){ 
 
currentImageIndex = 0 
 
} 
 
$('#imgAnimation').fadeOut(1000,function(){ 
 
$('#imgAnimation').attr('src',imgs[currentImageIndex]).fadeIn(1000); 
 
currentImageIndex++ 
 
}) 
 
setTimeout(changeImage, 4600); 
 
} 
 
changeImage(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 

 
<img id="imgAnimation" src="https://cdn.pbrd.co/images/JmrLKd7hq.jpg" />

먼저 우리는 우리의 기능 changeImage 정의, 그 첫 번째 작업은 우리가 배열의 길이 카운터를 비교할 수 있도록 우리의 카운터가 우리의 배열의 끝을 통과하지 않았습니다 확인하는 것입니다 길이가 1을 뺀 값이 최대 인덱스가 아닌 카운트를 반환 할 것이고, 카운터가 최대 인덱스를 통과했다면 우리는 카운터를 0으로 초기화 할 것입니다. 그런 다음 애니메이션 단계를 시작하여 대상을 맞추기 위해 이미지의 ID 참조를 포함 시켰습니다. 먼저 페이드 아웃하고 completion 함수 호출을 사용하여 이미지의 src 특성을 배열의 다음 값으로 설정 한 다음 페이드 인 함수를 호출합니다. 이제 카운터에 하나를 더한 다음 지정된 지연 후에 다시 함수를 호출하도록 요청하는 timeout 함수를 호출합니다.

확장해야 할 경우 여러 개의 배열과 여러 대상을 가질 수 있고 함수를 약간 변경하여 각각의 애니메이션을 개별적으로 수행 할 수 있습니다.이 경우이를 알려 주면 게시 할 예정입니다. 내 솔루션의 추가 코드.

당신이 다음 HTML 태그의 src 속성을 제거 할 수 있습니다 그냥 확인하기 위해 높이와 폭의 스타일 속성을 추가 시작 페이드를 방지하려면 다음과 바이올린 https://jsfiddle.net/p1k71nns/ 를 확인 여기에 실행하는 것 나던 코드로

공간은 애니메이션 용으로 예약되어 있습니다.

Answer 2

fadeIn이 완료되면 변경하기 위해 콜백을 제거하기 만하면됩니다.

은 전에 :

$(this).fadeIn("slow", change()); 

AFTER :

$(this).fadeIn("slow"); 

당신하여 setInterval을 사용하고 있기 때문에, 변경 기능은 이미 매 4.6 초라고한다.