Jquery 관련 고수분들께 질문있습니다. 채택완료
(function ($) {$(document).ready(function() {
var $main = $( '#spaces-main' ),
$pages = $main.children( 'section.page-section' ),
$iterate = $( '#iterateEffects' ),
animcursor = 1,
pagesCount = $pages.length,
current = 0,
isAnimating = false,
endCurrPage = false,
endNextPage = false,
animEndEventNames = {
'WebkitAnimation' : 'webkitAnimationEnd',
'OAnimation' : 'oAnimationEnd',
'msAnimation' : 'MSAnimationEnd',
'animation' : 'animationend'
},
// animation end event name
animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
// support css animations
support = Modernizr.cssanimations;
var html = document.getElementsByTagName('html')[0];
$(window).bind("load", function() {
html.className = html.className.replace(/loading/, '');
});
setTimeout(function() {
if(window.location.hash && window.location.hash != '#man') {
locationHashChanged();
}
}, 1500);
function locationHashChanged() {
$('.vertical-menu').hide({width: [ "toggle", "linear" ] }, 80, "linear");
var pagesClasses = new Array();
$.each( $pages, function(ind, itm){
var classList = itm.className.split(/\s+/);
var sectionclass = classList[1].replace('-page','');
pagesClasses.push( sectionclass );
});
var hash = 'woman';
if(window.location.hash) {
hash = window.location.hash.substring(1);
}
var hashIndex = jQuery.inArray( hash, pagesClasses );
if( hashIndex !== -1 ) {
nextPage( animcursor, hashIndex );
};
}
window.onhashchange = locationHashChanged;
function init() {
$pages.each( function() {
var $page = $( this );
$page.data( 'originalClassList', $page.attr( 'class' ) );
} );
$pages.eq( current ).addClass( 'page-section-current' );
$iterate.on( 'click', function() {
var $pageindex = 0;
if( isAnimating ) {
return false;
}
if( animcursor > 67 ) {
animcursor = 1;
}
nextPage( animcursor );
++animcursor;
} );
}
function nextPage( animation, cur) {
if( isAnimating ) {
return false;
}
isAnimating = true;
var $currPage = $pages.eq( current );
if(typeof cur == 'undefined'){
current = 0;
}else{
current = cur;
}
var $nextPage = $pages.eq( current ).addClass( 'page-section-current' );
var outClass = '', inClass = '';
switch( animation ) {
case 1:
outClass = 'pt-page-moveToLeft';
inClass = 'pt-page-moveFromRight';
break;
case 2:
outClass = 'pt-page-moveToTop';
inClass = 'pt-page-moveFromBottom';
break;
}
$currPage.addClass( outClass ).on( animEndEventName, function() {
$currPage.off( animEndEventName );
endCurrPage = true;
if( endNextPage ) {
onEndAnimation( $currPage, $nextPage );
}
} );
$nextPage.addClass( inClass ).on( animEndEventName, function() {
$nextPage.off( animEndEventName );
endNextPage = true;
if( endCurrPage ) {
onEndAnimation( $currPage, $nextPage );
}
} );
if( !support ) {
onEndAnimation( $currPage, $nextPage );
}
}
function onEndAnimation( $outpage, $inpage ) {
endCurrPage = false;
endNextPage = false;
resetPage( $outpage, $inpage );
isAnimating = false;
}
function resetPage( $outpage, $inpage ) {
$outpage.attr( 'class', $outpage.data( 'originalClassList' ) );
$inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' page-section-current' );
}
init();
return { init : init };
//})();
});
})(jQuery);;
-------
요렇게 작업을 하다가 SECTION 별로 슬라이드 형태로 화면이 움직이는데
swith 문에 되어있는대로 case 1 효과는 man-page에서 case 2 효과는 woman-page 에서
나오는게 아니라 둘다 case 1효과로만 나오더라고요
혹시 switch 문이 잘못된건지 고수분들 조언부탁드립니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
브라이언2
11년 전
switch( animation ) 하기 전에
f12 누르시면 개발자도구가 뜨는데
먼저 console.log(animation)을 찍어보세요..
각각의 경우에 맞게 잘 들어오는지 부터 확인 해봐야 할듯 하네요.
관리자도구에서 console.log를 혹시 확인 못하시면 alert(animation)으로 찍어보셔도 괜찮습니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
채택
채택
답변대기
채택
답변대기
답변대기
채택
채택
답변대기
답변대기
채택
채택
답변대기
채택
답변대기
채택
답변대기
채택