정보실

웹학교

정보실

jQuery jQuery animation queue 예...

본문

<html>

<head>

<script

  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">

  $(document).ready(function() {

 

    $(document.body).click(function() {

      $("div").show("slow");

      $("div").animate({

        left : '+=20'

      }, 2000);

      $("div").queue(function() {

        $(this).addClass("newcolor");

        $(this).dequeue();

      });

      $("div").animate({

        left : '-=20'

      }, 500);

 

      $("div").slideUp();

    });

  });

</script>

<style>

div {

  margin: 3px;

  width: 50px;

  position: absolute;

  height: 50px;

  left: 10px;

  top: 30px;

  background-color: yellow;

}

 

div.red {

  background-color: red;

}

</style>

</head>

<body>

  Click here...

  <div>365ok.co.kr</div>

</body>

</html> 

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

페이지 정보

조회 225회 ]  작성일15-06-12 00:18

웹학교