JQuery 애니메이션 관련 정리(fadeIn,fadeOut,hide,show,animate,stop)

2017. 6. 11. 21:09

[ JQuery 애니메이션 관련 정리(fadeIn,fadeOut,hide,show,animate,stop) ]

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>animate 관련...</title>
  </head>
  
    <button type="button" id="button1">BTN1</button>
    <p id="p1">BTN1</p>
    <button type="button" id="button2">BTN2</button>
    <p id="p2">BTN2</p>
    <button type="button" id="button3">BTN3</button>
    <p id="p3">BTN3</p>
    <button type="button" id="button4">BTN4</button>
    <p id="p4">BTN4</p>
    <button type="button" id="button5">BTN5</button>
    <p id="p5">BTN5</p>
    <button type="button" id="button6">BTN5</button>

// 9. $(선택자).animate({css속성},ms) : ms초에 걸쳐 css 속성을 지정된 걸 차츰 적용함(애니메이션 효과)
      $("#button5").on("click",function(event){
        $("#p5").animate({margin-left:250px,color:red},5000).animate({margin-left:0px},3000);
      });

// 10. $(선택자).stop() : 수행중인 애니메이션 효과를 정지시킴
      $("#button6").on("click",function(event){
        $("#p5").stop();
      });

</script>

저작자표시 (새창열림)

'개발 > Javascript' 카테고리의 다른 글

클릭시 특정 태그 위치로 스크롤을 이동시키기 (1)	2017.06.11
이벤트 발생시 a 태그의 이동기능을 동작하지 않게하고 처리하기 (0)	2017.06.11
4. script 선언의 위치?!! (0)	2017.06.11
3. 일정주기마다 callback 함수를 실행하는 setInterval()에 대해서... (0)	2017.06.11
2. JQuery로 선택한 태그 요소의 값과 속성을 바까보자 (3)	2017.06.11

악덕고용주의 개발 일기

JQuery 애니메이션 관련 정리(fadeIn,fadeOut,hide,show,animate,stop)

'개발 > Javascript' 카테고리의 다른 글

+ Recent posts

티스토리툴바