jquery 애니메이션 2. 요소 좌표 애니메이션 효과(그림 복도 생성)_jquery

key = "image1",
details = {
image1: {
위치: 0,
제목: Slide.children().eq(0).attr(' alt')
},
image2: {
위치: -400,
제목: Slide.children().eq(1).attr('alt')
},
image3: {
위치: -800,
제목: Slide.children().eq(2).attr('alt')
},
image4: {
위치 : -1200,
제목: Slide.children().eq(3).attr('alt')
},
image5: {
위치: -1600,
제목: Slide.children().eq(4).attr('alt')
}
};

$('

', {
id: 'title',
text: Details[key].title
}).prependTo('#slider')

function postAnim(dir) {
//먼저 숫자 부분만 포함된 현재 활성 이미지의 ID를 가져옵니다.
var keyMath =parseInt(key.match(/d $/))
　 //슬라이드의 왼쪽이 더 작습니다. 0보다 크면 현재 활성 이미지가 그림 1이 아니며 '이전' 탐색이 표시됩니다. 그렇지 않으면 '이전' 탐색이 사라집니다
(parseInt(slide.css('left')) < 0) ? prev.show() : prev.hide(); //슬라이드의 왼쪽은 -1600입니다. 이는 현재 활성 사진이 5장이고 '다음' 탐색이 사라짐을 의미합니다. 그렇지 않으면 '다음' ' 탐색 표시
(parseInt(slide.css('left') ) === -1600) ? next.hide() : next.show();
　
　 //if 조건문만 '이전' 및 '다음' 탐색을 사용할 때 의미가 있습니다. 구현된 기능은 '이전'을 클릭하면 키가 1씩 감소하고, '다음'을 클릭하면 키가 1씩 증가하는 것입니다.
if (dir) {
var titleKey = (dir === 'back') ? keyMath - 1 : keyMath 1;
key = 'image' titleKey;
}
　 //h2 제목 재설정
container.find('#title').text(details[key] .title);
//현재 활성화된 사진 재설정
container.find('.active').removeClass('active')
container.find('a[href=#' key) ']' ).addClass('active');
}

nextChild.add(prevChild).click( function (e ) {
// 기본 이벤트를 방지합니다. 그렇지 않으면 애니메이션 효과가 사라집니다.
e.preventDefault()
var arrow = $(this).parent()> / / 현재 슬라이드에 애니메이션이 없습니다. 새로운 애니메이션 효과를 추가할 때
　if (!slide.is(':animated')) {
slide.animate({
left: (arrow.attr(' id')) == = 'prev') ? ' =400' : '-=400'
}, 'slow', 'easeOutBack', function () {
(arrow.attr("id" ) === ") ? postAnim("back") : postAnim("forward")
})


이미지의 해당 탐색 기능 구현.

　//현재 활성 사진 ID 가져오기
key = $(this ).attr('href').split('#')[1];
//애니메이션 효과 설정
　slide.animate({
left: 세부정보[key]. position
} , 'slow', 'easeOutBack', postAnim)
})


데모를 다운로드하면 기능이 어떻게 작동하는지 확인할 수 있습니다. 다음과 같이 구현됩니다.

데모 다운로드 주소: