묻고답하기
jquery scrollTop 오류
2017.02.28 22:11
각 섹션의 높에값에 오면 ani_section함수가 실행되게 하려고 하는데
문제 1 ani_section함수가 계속 반복되서 나옵니다.
문제 2 섹션 함수가 순차적으로 나오게 하고 싶은데 stop().을 animate()앞에 주면 동시에 실행 되요,,
고수님들 부탁 드립니다, 급한거라...ㅠ.ㅠ'
$(function(){
var section1 = 0;
var section2 = 0;
var section3 = 0;
var section4 = 0;
var section6 = 0;
var section7 = 0;
var section8 = 0;
ani_section1();
$(window).scroll(function(){
if($(this).scrollTop() == 0){
ani_section1();
section1 = 1;
//섹션1 포지션 플래그 함수
fixRightBt_Section1();
}
if($(this).scrollTop() >800){
if(section2==0){
ani_section2();
section2 = 1;
}
else {
$('#section_2').stop();
//섹션2 포지션 플래그 함수
fixRightBt_Section2();
}
}
if( $(this).scrollTop() > 1800 ){
if(section3 == 0){
ani_section3();
section3 = 1;
}
else {
$("#section_3").stop();
//섹션3 포지션 플래그 함수
fixRightBt_Section3();
}
}
if( $(this).scrollTop() > 3000 ){
if(section4 == 0){
ani_section4();
section4 = 1;
}
else {
$("#section_4").stop();
//섹션4 포지션 플래그 함수
fixRightBt_Section4();
}
}
if( $(this).scrollTop() > 5000 ){
if(section6 == 0){
ani_section6();
section6 = 1;
}
else {
$("#section_6").stop();
}
}
if( $(this).scrollTop() > 6000 ){
if(section7 == 0){
ani_section7();
section7 = 1;
}
else {
$("#section_7").stop();
}
}
if( $(this).scrollTop() > 7000 ){
if(section8 == 0){
ani_section8();
section8 = 1;
}
else {
$("#section_8").stop();
}
}
});
//jQuery 사용자 함수 시작
//섹션 1
function ani_section1(){
section1=1;
section2=0;
section3=0;
section4=0;
section6=0;
section7=0;
section8=0;
setInterval(logo,3000);
}
//로고 함수
function logo () {
//로고 p
$(".section01_logo_3").animate({opacity:0},0);
$(".section01_logo_3").animate({opacity:1},1000);
$(".section01_logo_3").animate({opacity:1},1000);
$(".section01_logo_3").animate({opacity:0},1000);
$(".section01_logo_3").animate({opacity:0},1000);
$(".section01_logo_3").animate({opacity:0},1000);
$(".section01_logo_3").animate({opacity:1},5000);
//로고H
$(".section01_logo_4").animate({opacity:0},0);
$(".section01_logo_4").animate({opacity:0},1000);
$(".section01_logo_4").animate({opacity:1},1000);
$(".section01_logo_4").animate({opacity:1},1000);
$(".section01_logo_4").animate({opacity:0},1000);
$(".section01_logo_4").animate({opacity:0},1000);
$(".section01_logo_4").animate({opacity:1},5000);
//로고B
$(".section01_logo_5").animate({opacity:0},0);
$(".section01_logo_5").animate({opacity:0},1000);
$(".section01_logo_5").animate({opacity:0},1000);
$(".section01_logo_5").animate({opacity:1},1000);
$(".section01_logo_5").animate({opacity:1},1000);
$(".section01_logo_5").animate({opacity:0},1000);
$(".section01_logo_5").animate({opacity:1},5000);
}
//섹션2
function ani_section2(){
section1=0;
section2=1;
section3=0;
section4=0;
section6=0;
section7=0;
section8=0;
$(".section02_title").stop().animate({top:"100px",opacity: 0},0);
$(".section02_title").stop().animate({top:"254px",opacity: 1},2000);
$(".section02_box01").stop().animate({opacity:0,top:'0px'}, 0);
$(".section02_box01").stop().animate({opacity:0,top:'306px'},1500);
$(".section02_box01").stop().animate({opacity:1,top:'306px'},2000);
$(".section02_box02").stop().animate({top:"400px",opacity: 0},0);
$(".section02_box02").stop().animate({top:"400px",opacity: 0},2500);
$(".section02_box02").stop().animate({top:"575px",opacity: 1},2000);
}
//섹션3 서클
function ani_section3(){
section1=0;
section2=0;
section3=1;
section4=0;
section6=0;
section7=0;
section8=0;
$('.first.circle').circleProgress({
value: 0.85,
fill:{gradient: ['#fecccc','#ff5f5f']}
}).on('circle-animation-progress', function(event, progress) {
// $(this).find('strong').html(Math.round(80 * progress) + '<i>%</i>');
});
$('.second.circle').circleProgress({
value: 0.75,
fill:{gradient: ['#fecccc','#ff5f5f']}
}).on('circle-animation-progress', function(event, progress) {
// $(this).find('strong').html(Math.round(80 * progress) + '<i>%</i>');
});
$('.third.circle').circleProgress({
value: 0.70,
fill: {gradient: [['#fecccc', .5], ['#ff5f5f', .5]], gradientAngle: Math.PI / 4}
}).on('circle-animation-progress', function(event, progress, stepValue) {
// $(this).find('strong').text(stepValue.toFixed(2).substr(1));
});
$('.forth.circle').circleProgress({
value: 0.4,
fill: {gradient: [['#fecccc', .5], ['#ff5f5f', .5]], gradientAngle: Math.PI / 4}
}).on('circle-animation-progress', function(event, progress, stepValue) {
// $(this).find('strong').text(stepValue.toFixed(2).substr(1));
});
$('.fifth.circle').circleProgress({
value: 0.6,
fill: {gradient: [['#fecccc', .5], ['#ff5f5f', .5]], gradientAngle: Math.PI / 4}
}).on('circle-animation-progress', function(event, progress, stepValue) {
// $(this).find('strong').text(stepValue.toFixed(2).substr(1));
});
}
//섹션4
function ani_section4(){
section1=0;
section2=0;
section3=0;
section4=1;
section6=0;
section7=0;
section8=0;
$(".section04_txt_01").stop().animate({opacity: 0,left: '800px'},0);
$(".section04_txt_01").stop().animate({opacity: 1,left: '1020px'},2000);
$(".section04_txt_02").stop().animate({opacity: 0},0);
$(".section04_txt_02").stop().animate({opacity: 0},4000);
$(".section04_txt_02").stop().animate({opacity: 1},1000);
$(".section04_txt_03").stop().animate({opacity: 0},8000);
$(".section04_txt_03").stop().animate({opacity: 1},1000);
}
//섹션6
function ani_section6(){
section1=0;
section2=0;
section3=0;
section4=0;
section6=1;
section7=0;
section8=0;
$(".section06_title_05").animate({ opacity: 0},0);
$(".section06_title_05").animate({ opacity: 0},3000);
$(".section06_title_05").animate({opacity: 1},2000);
$(".computer01").animate({left: "-500px", opacity: 0},0);
$(".computer01").animate({left: "0px", opacity: 1},1500);
$(".section06_tap").animate({left: "-50px", opacity: 0},0);
$(".section06_tap").animate({left: "-50px", opacity: 0},1500);
$(".section06_tap").animate({left: "724px", opacity: 1},3000);
$(".section06_txt").animate({opacity: 0},0);
$(".section06_txt").animate({opacity: 0},2000);
$(".section06_txt").animate({opacity: 1},2000);
}
//섹션7
function ani_section7(){
section1=0;
section2=0;
section3=0;
section4=0;
section6=0;
section7=1;
section8=0;
$(".section07_title_06").animate({opacity:0},0);
$(".section07_title_06").animate({opacity:0},2000);
$(".section07_title_06").animate({opacity: 1},2000);
$(".phone01").animate({right: "-500px", opacity: 0},0);
$(".phone01").animate({right: "0px", opacity: 1},1500);
$(".section07_tap").animate({right: "-50px", opacity: 0},0);
$(".section07_tap").animate({right: "-50px", opacity: 0},1500);
$(".section07_tap").animate({right: "566px", opacity: 1},3000);
$(".section07_txt").animate({opacity:0},0);
$(".section07_txt").animate({opacity:0},4500);
$(".section07_txt").animate({opacity: 1},2000);
}
//섹션8
function ani_section8(){
section1=0;
section2=0;
section3=0;
section4=0;
section6=0;
section7=0;
section8=1;
$(".section07_title_07").animate({opacity:0},0);
$(".section07_title_07").animate({opacity:0},2000);
$(".section07_title_07").animate({opacity: 1},2000);
$(".macbook01").animate({left: "-500px", opacity: 0},0);
$(".macbook01").animate({left: "0px", opacity: 1},1500);
$(".section08_tap").animate({left: "-50px", opacity: 0},0);
$(".section08_tap").animate({left: "-50px", opacity: 0},1500);
$(".section08_tap").animate({left: "548px", opacity: 1},3000);
$(".section08_txt").animate({opacity:0},0);
$(".section08_txt").animate({opacity:0},4500);
$(".section08_txt").animate({opacity: 1},2000);
}
});
댓글 0
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
소엔트 | 영문 주소지를 입력하는 방법이 있을까요? | |
밧떼리 | 최신 버전(XE Core ver. 1.8.26 )에서 게시글 등록 버튼이 동작하지 않는 문제인데요 [2] | 2017.03.01 by 밧떼리 |
밧떼리 | XE 모바일 홈페이지 접속할 때 레이아웃 질문 드립니다. | |
댑펑 | BlogAPI의 공식 매뉴얼은 없나요? | |
양들의메밀묵 | xedition 서브 상단이미지 질문요! [4] | 2017.03.01 by 양들의메밀묵 |
inseo | 카테고리별로 포인트를 다르게 주고 추천버튼 누르는 회원들에게도 포인트를 주고 싶습니다. | |
리즈러브 | jquery scrollTop 오류 | |
개골동자 | 마이그레이션 오류 [2] | 2017.02.28 by lis**** |
올바른복장 | 홈페이지 제작/업데이트 [2] | 2017.02.28 by 올바른복장 |
도롱테 | 자동 비밀글 설정.. 관리자의 공지글만 비밀 해제하려면 어떻게 하나요? | |
설갈매기 | xe 관리자 비밀번호를 잊어 버렸어요 도와주셔요 [6] | 2017.02.28 by 설갈매기 |
뽀미 | 여기 홈처럼 우측 네비게이션 하려면 어떻게 하나요? [1] | 2017.02.27 by Ansi™ |
주식회사슈왈로그룹 | XE 게시판 오류 [1] | 2017.02.27 by Ansi™ |
올바른복장 | 홈페이지 설정관리 [5] | 2017.02.27 by 올바른복장 |
정윤규 | xe 관리자 계정 복구 [2] | 2017.02.27 by 정윤규 |
tilerben | 선생님들 저좀 도와주실래요..ㅠ AWS에 XE설치를... [1] | 2017.02.27 by 기진곰 |
홍찬 | 모듈 미삭제하고 업데이트후 DB자동생성 | |
녹향 | 이미지에 관한 문의 [2] | 2017.02.27 by 녹향 |
이벤트서치 | 위젯박스에서 몇가지 배너가 돌아가는 롤링 위젯은 어디서 구하나요? [2] | 2017.02.26 by 이벤트서치 |
nimm | 다중에디터질문.. [1] | 2017.02.26 by HowtoXE |