메인메뉴 바로가기

HOME으로 가기


Javascript

제이쿼리 | 제이쿼리 - 시간차 활용 방법들 모음

본문

// #box를 1초 지연후 페이드인 처리

$("#box").delay(1000).fadeIn();

 

 

// #box가 현재 애니메이션중이면 즉시 중지후 다시 선언한대로 애니메이션 실행.

$("#box"​).stop().animate({ left: "500px"}, 1000);

 

 

//queue 활용

$( "#start" ).click(function() {

  var myDiv = $( "div" );

  myDiv.show( "slow" );

  myDiv.animate({

    left:"+=200"

  }, 5000 );

 

  myDiv.queue(function() {

    var that = $( this );

    that.addClass( "newcolor" );

    that.dequeue();

  });

 

  myDiv.animate({

    left:"-=200"

  }, 1500 );

  myDiv.queue(function() {

    var that = $( this );

    that.removeClass( "newcolor" );

    that.dequeue();

  });

  myDiv.slideUp();

});

 

$( "#stop" ).click(function() {

  var myDiv = $( "div" );

  myDiv.clearQueue();

  myDiv.stop();

});​ 

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기