jQuery - Effects - Animation

Browse more Jquery Examples
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#btn11").click(function(){
    $("#div11").animate({
      left: '250px',
      opacity: '0.5',
      height: '150px',
      width: '150px'
    });
  });
  $("#btn12").click(function(){
    $("#div11").animate({
      left: '250px',
      height: '+=150px',
      width: '+=150px'
    });
  }); 
  $("#btn13").click(function(){
    $("#div11").animate({
      height: 'toggle'  //"show", "hide", or "toggle":
    });
  });  
  
  
  //2.
  $("#btn21").click(function(){
    var div = $("#div21");
    div.animate({height: '300px', opacity: '0.4'}, "slow");
    div.animate({width: '300px', opacity: '0.8'}, "slow");
    div.animate({height: '100px', opacity: '0.4'}, "slow");
    div.animate({width: '100px', opacity: '0.8'}, "slow");
  });
  $("#btn22").click(function(){
    var div = $("#div22");
    div.animate({left: '100px'}, "slow");
    div.animate({height: '100px'}, "slow");
    div.animate({width: '200px'}, "slow");
    div.animate({fontSize: '3em'}, "slow");
  });  
});
</script> 
<style> 
#div11,#div21 {
    background:#98bf21;
    height:100px;
    width:100px;
    //position:absolute;
}
</style>
</head>
<body>

<div>
    1. 기본 예제<br>
<button id="btn11">1.Start Animation</button>
<button id="btn12">2.Start Animation</button>
<button id="btn13">3.toggle 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="div11"></div>
</div>
<br>

<div>
<p>2. Example
<br>Queue functionality for animations</p>
<button id="btn21">1.Example</button><br>
<div id="div21"></div>
</div>

<button id="btn22">2.Example</button><br>
<div id="div22" style="background:#98bf21;height:100px;width:100px;position:absolute;">HELLO</div>
</div>
</body>
</html>
jQuery - Effects - Animation

Follow

Newsletter
