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 class="page-section man-page"> <a href="#woman">여자</a>... </section>
<section class="page-section woman-page"> <a href="#man">남자</a>... </section>
요렇게 작업을 하다가 SECTION 별로 슬라이드 형태로 화면이 움직이는데
swith 문에 되어있는대로 case 1 효과는 man-page에서 case 2 효과는 woman-page 에서
나오는게 아니라 둘다 case 1효과로만 나오더라고요
혹시 switch 문이 잘못된건지 고수분들 조언부탁드립니다.
답변 1
switch( animation ) 하기 전에
f12 누르시면 개발자도구가 뜨는데
먼저 console.log(animation)을 찍어보세요..
각각의 경우에 맞게 잘 들어오는지 부터 확인 해봐야 할듯 하네요.
관리자도구에서 console.log를 혹시 확인 못하시면 alert(animation)으로 찍어보셔도 괜찮습니다.
답변을 작성하시기 전에 로그인 해주세요.
