묻고답하기

각 섹션의 높에값에 오면 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 남기남
리즈러브 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 녹향
이벤트서치 위젯박스에서 몇가지 배너가 돌아가는 롤링 위젯은 어디서 구하나요? [2] 2017.02.26 by 이벤트서치
nimm 다중에디터질문.. [1] 2017.02.26 by HowtoXE
승강기닷컴 모바일 화면크기문제 [2] file 2017.02.26 by i100doo
xe초보 누리고 ADMIN 각 메뉴 클릭 에러 내용인데 해결 가능한가요? [1] 2017.02.26 by HowtoXE
inseo 모바일에서도 특정 그룹만 제목 색, 굵기, 공지 지정을 가능하게 하고 싶습니다. [1] file 2017.02.26 by HowtoXE
보로봉봉 XE 게시판 글 CSV 파일로 추출 가능? [2] 2017.02.26 by HowtoXE
펭구 레이아웃 css 수정 406 에러 문의 [2] 2017.02.26 by 펭구
i100doo PHP 업데이트에 대한 초보의 간절한 질문. [8] 2017.02.26 by GG
inseo 글 클릭하면 글과 댓글 사이에 목록 아이콘을 뜨게 하고 싶습니다. [2] file 2017.02.26 by inseo
주방이모 ckeditor "가로 줄 삽입" 문의드립니다. [1] file 2017.02.26 by HowtoXE
cero 업그레이드 이후 한글 깨짐 현상 [1] 2017.02.26 by 펭구
잡순이 XE 글을 쓸때 특정 단어(금칙어)를 입력하면 등록이 안되는데..해결좀 ㅠㅠ [1] 2017.02.25 by 잡순이
miso77 홈페이지 이전 문의드립니다.. [2] 2017.02.25 by miso77
amaq 'update_nick_name 값은 필수입니다' 오류 [2] 2017.02.25 by amaq
우랑탕탕이 레이아웃에 위젯넣을 때 위젯 스타일 적용 방법중에서...  
홈런볼11 게시물 일부 내용 회원만 보이게 하기 [1] 2017.02.24 by sejin7940
빗소리 html 수정하는 법 [2] 2017.02.24 by 닉네임설정한시간째
jforgood 특정 div을 랜덤으로 보이게 안보이게하는 자바스크립트 구현하고 있는데 힘드네요 [2] 2017.02.24 by jforgood