jQuery dan Animasi

Pengantar

metode show - hide

<h1 id="target">Hello Coddy</h1>	
<button id="show">Show</button>	
<button id="hide">Hide</button>	

<script>
/*
hide method hides target 
element from DOM.
*/
$('#hide').on('click', function(){
   $('#target').hide();
})

/*
show method shows the 
target element in the DOM.
*/
$('#show').on('click', function(){
  $('#target').show();
});

</script>

metode toggle

<h1 id="target">Hello Coddy</h1>	
<button id="toggle">Toggle</button>	

<script>
/*
toggle() method shows or hides the 
target element in the DOM.
*/
$('#toggle').on('click', function(){
  $('#target').toggle();
});
</script>

fadein dan fadeout

<h1 id="target">Hello Coddy</h1>	
<button id="show">Show with Animation</button>	
<button id="hide">Hide with Animation</button>	

<script>
/*
fadeOut method hides target 
element from DOM with Animation
*/
$('#hide').on('click', function(){
   $('#target').fadeOut();
})

/*
fadeIn method shows the 
target element in the DOM with Animation
*/
$('#show').on('click', function(){
  $('#target').fadeIn();
});

</script>

fadein dan fadeout

metode fadeToggle

<h1 id="target">Hello Coddy</h1>	
<button id="toggle">Fade Toggle</button>	

<script>
/*
fadeToggle() method shows or hides the 
target element in the DOM with Animation
*/
$('#toggle').on('click', function(){
  $('#target').fadeToggle();
});
</script>

Animasi CSS

<div id="target">Box</div>

<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>

<script>
/*
The animate method takes a JSON object 
containing four properties as an argument.
*/
$("#target").animate({
            width: "100px",
            height: "100px",
            marginLeft: "50px",
            opacity: 0.5
        }, 4000);
</script>

Pengelola peristiwa animasi

<div id="target">Box</div>

<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>

<script>
/*
The animate method takes a JSON object 
containing four properties as an argument.
*/
$("#target").animate({
            width: "100px",
            height: "100px",
            marginLeft: "50px",
            opacity: 0.5
        }, 4000, 
   function(){
    alert('animation is completed')
});
</script>

animasi relatif

$("button").animate({            
            top: "+=100px",
        });

menghentikan animasi

const $ = (selector) => ({ stop: () => console.log('stop called on ' + selector) });
$("#target").stop();

Bawaan

//showing by slide up animation.
console.log("slideUp animation on div elements");

//hiding by slide up animation.
console.log("slideUp animation on div elements");

/*
hides if the element is showing,
or shows if it is hidden.
*/
console.log("slideToggle animation on div elements");

durasi animasi relatif

// animation takes 1 second.
console.log("$('div').slideUp(1000) - slides element up over 1000ms");

/*
We can also use a relative 
expression like slow or fast.
*/
console.log("$('div').slideUp('fast') - slides element up quickly");
console.log("$('div').slideToggle('slow') - toggles slide animation slowly");

pengelola peristiwa

setTimeout(function() {
	//Call when animation is completed
}, 1000);

Selamat