jquery animation 3. 마스크 효과를 사용하여 그림 복도 만들기_jquery

', {
id: config.containerID
});
//생성해야 하는 조각 수를 결정하는 루프
for (var i = 0; i < config.multi ; i ) {
//조각 만들기, 각 조각에는 현재 표시된 이미지의 일부만 포함됩니다
$('', {
//너비 설정
width : config.transitionWidth,
//높이 설정
height: config.transitionHeight,
css: {
//배경 이미지 설정, 소스는 현재 표시된 이미지
backgroundImage: ' url(' $('.' config.visibleClass, $(config.selector)).attr('src') ')',
//배경 이미지의 크기를 다음과 같이 설정합니다. 외부 컨테이너의 높이와 너비와 일치합니다.
//이렇게 하면 이미지 크기에 관계없이 쉽게 크기가 일치합니다
backgroundSize: $(config.selector).width() ' px ' $(config.selector).height() 'px',
//배경 오프셋 설정
backgroundPosition: bgHorizMarker 'px 0',
//왼쪽 값 설정
left: posLeftMarker,
top: 0
}
}) .appendTo(overlay);//마스크 레이어 컨테이너에 추가
//오프셋 다시 계산
bgHorizMarker -= config.transitionWidth
posLeftMarker = config.transitionWidth;
}
//페이지에 마스크 레이어 컨테이너 추가
overlay.insertBefore('#' config.prevID)


확인 마스크 레이어를 실행하는 코드가 남았습니다. 이 코드도 매우 간단합니다. 마스크 레이어 아래에 있는 다양한 div를 가져와 애니메이션 효과를 추가하고 높이나 너비를 하나씩 0으로 변경하는 것입니다. 전체 애니메이션이 완료된 후 마스크 레이어 밖으로 이동합니다. 컨테이너.