티스토리 뷰

jQuery/Effects

jQuery: animate, stop, chaining

carrot62 2020. 7. 30. 17:06
  • animate
    • top, left, height, width, opacity, fontSize 등을 이용해서 animation속성을 바꿀 수 있다
$(selector).animate({params},speed,callback);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#anibutton").click(function(){
    $("#ani").animate({
      left: '250px',
      top: '250px',
      opacity: '0.5',
      height: '150px',
      width: '150px'
    });
  });
});
</script> 
</head>
<body>

<button id="anibutton">Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div id="ani" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

</body>
</html>
  • stop
  • chaining: 여러개의 action/method들을 묶는것

css, slideDown, slideUp 등의 action을 "."을 이용해서 작업을 묶을 수 있다

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#p1").css("color", "red")
      .slideUp(2000)
      .slideDown(2000);
  });
});
</script>
</head>
<body>

<p id="p1">jQuery is fun!!</p>

<button>Click me</button>

</body>
</html>

 

'jQuery > Effects' 카테고리의 다른 글

jQuery: sliding  (0) 2020.07.30
jQuery: Fading  (0) 2020.07.30
jQuery: hide, show, toggle, callback functions  (0) 2020.07.30