묻고답하기

각 섹션의 높에값에 오면 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);


}

});
 

글쓴이 제목 최종 글
XE 공지 글 쓰기,삭제 운영방식 변경 공지 [16] 2019.03.05 by 남기남
우리지훈 댓글 폰트 문서 폰트 크기 질문  
야야야료 크로탭 스케줄 맞는지 확인좀 부탁드려요  
bncPlan cashe 123456789 라는 폴더가 수백개나 ... [1] file 2020.03.14 by 동길홍
마꼬꼬 VPS의 네트워크 속도를 어떻게 확인할 수 있는지 알고싶습니다.  
xe_마니 페이지에서 애드온 충돌 [1] 2017.03.02 by xe_마니
포(Po) 우리 왭싸이트가 해킹당했다고 하네요... [1] 2017.03.02 by 기진곰
아담하와 카X24) DB정보 서버이전시 문제 발생. 질문있습니다. [1] 2017.03.02 by 기진곰
소세빵 레이아웃 바꾼후 제목과 버튼의 글들이 줄바꿈합니다 [2] file 2017.03.02 by 소세빵
외도랑 게시판리스트 분류이동버튼 문의드립니다 [2] file 2017.03.02 by 외도랑
khami 관리자 회원 목록에서 설명이 보이게 하는 방법 문의 드립니다. [2] 2017.03.02 by khami
안드로이더스스 스케치북게시판 댓글표시;; 제발도와주세요 [1] file 2017.03.02 by sejin7940
chorok 1픽셀의 가는 실선 만들기 [2] file 2017.03.01 by chorok
소엔트 영문 주소지를 입력하는 방법이 있을까요?  
밧떼리 최신 버전(XE Core ver. 1.8.26 )에서 게시글 등록 버튼이 동작하지 않는 문제인데요 [2] 2017.03.01 by 밧떼리
밧떼리 XE 모바일 홈페이지 접속할 때 레이아웃 질문 드립니다. file  
댑펑 BlogAPI의 공식 매뉴얼은 없나요?  
양들의메밀묵 xedition 서브 상단이미지 질문요! [4] file 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] file 2017.02.27 by Ansi™
주식회사슈왈로그룹 XE 게시판 오류 [1] file 2017.02.27 by Ansi™
올바른복장 홈페이지 설정관리 [5] file 2017.02.27 by 올바른복장
정윤규 xe 관리자 계정 복구 [2] 2017.02.27 by 정윤규
tilerben 선생님들 저좀 도와주실래요..ㅠ AWS에 XE설치를... [1] 2017.02.27 by 기진곰
홍찬 모듈 미삭제하고 업데이트후 DB자동생성  
녹향 이미지에 관한 문의 [2] 2017.02.27 by 녹향