4B. Multiple Effects using callbacks
bogotobogo.com site search:
jQuery Effects - callbacks
With jQuery, we can add simple effects to our page easily. Effects can use the built-in settings, or provide a customized duration. We can also create custom animations of arbitrary CSS properties.
Here is our new html file (j4_events_callback.html):
<html>
<head>
<meta charset="utf-8" />
<title>jQuery effects</title>
</head>
<body>
<style type="text/css">h2 {background-color:salmon; }</style>
<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js""></script>
<script type="text/javascript" src="jQuery_effects_callback.js"></script>
<script> </script>
</body>
</html>
Our js file, jQuery_events.js:
$( document ).ready(function() {
$('h1').click(function(){
$('h2').hide(1000);
});
});
Initial picture looked like this.
Now, we want to h3 heading to disappear as soon as the h2 finishing the hide(). Here is our new js file:
$( document ).ready(function() {
$('h1').click(function(){
$('h2').hide(1000, function(){
$('h3').fadeOut(1000);
});
});
});
We can see the effect from a playback below:
Ph.D. / Golden Gate Ave, San Francisco / Seoul National Univ / Carnegie Mellon / UC Berkeley / DevOps / Deep Learning / Visualization
My YouTube channel