jQuery Animation with Fade, Slide, Toggle and Animate

Animation in web pages includes effects like fading in or fading out, sliding up or sliding down of HTML elements. The show and hide methods can be used to do a bit of animation. Next level of jQuery Animation can be implemented by Fade, Slide, Toggle, and Animate

jQuery Animation with Slide, Fade, Toggle and Custom Animate

jQuery Animation Fade

Fading effect is great when you want the HTML element to fade in or fade out from the background.

fadeIn method disappears an element into background

$(selector).fadeIn(speed,callback);

fadeOut method slowly brings back an element from the background to the front.

$(selector).fadeOut(speed,callback);

Along with these two another method fadeToggle can be used. It allows you to toggle between fading in and fading out.

$(selector).fadeToggle(speed,callback);

The selector can be ID, Name, Attribute or Class of the element.

Code Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#fadein").click(function(){
	$("#flower").fadeIn("slow");
	});
		
$("#fadeout").click(function(){
	$("#flower").fadeOut("slow");
	});
$("#fadeTogg").click(function(){
	$("#flower").fadeToggle("slow");
	});
});
</script>
</head>
<body style="font-family:arial"> 
<div style="width:40%;background-color:black; color:lightgray; text-align:center; padding-top:10px;padding-bottom:20px"> 
<input type="button" id="fadein" value="click to fade in" style="background-color:black;color:lightgray;">
<input type="button" id="fadeout" value="click to fade out" style="background-color:black;color:lightgray;">
<input type="button" id="fadeTogg" value="click to fade toggle" style="background-color:black;color:lightgray;">
</div>
<img src="https://csveda.com/wp-content/uploads/2020/05/flower-1024x678.jpg" id="flower" height="40%" width="40%">
</body>
</html>

jQuery Animation Slide

Sliding effect is gives a sliding movement to an HTML element. The sliding can be implemented from down to up or up to down.

slideUp method wraps up an HTML element from bottom

$(selector).slideUp(speed,callback);

slideDown method opens down an HTML element from the start to downwards

$(selector).slideDown(speed,callback);

Along with these two another method slideToggle can be used. It allows you to toggle between upwards and downwards sliding.

$(selector).slideToggle(speed,callback);

The selector can be ID, Name, Attribute or Class of the element.

Code Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#SliUp").click(function(){
	$("#flower").slideUp();
	});
		
$("#SliDown").click(function(){
	$("#flower").slideDown();
	});

$("#SliTogg").click(function(){
	$("#flower").slideToggle();
	});
});
</script>
</head>
<body style="font-family:arial"> 
<div style="width:40%;background-color:black; color:lightgray; text-align:center; padding-top:10px;padding-bottom:20px"> 
<input type="button" id="SliUp" value="Slide Up" style="background-color:black;color:lightgray;">
<input type="button" id="SliDown" value="Slide Down" style="background-color:black;color:lightgray;">
<input type="button" id="SliTogg" value="Slide Toggle" style="background-color:black;color:lightgray;">
</div>
<img src="https://csveda.com/wp-content/uploads/2020/05/flower-1024x678.jpg" id="flower" height="40%" width="40%">
</body>
</html>

jQuery Animate

Any other animation that does not fit in slide or fade can be customized with animate method. With Animate method the CSS must be modified for the element to be animated.

The method is called in this way

$(selector).animate({CSS parameters},speed, callback);

The selector can be ID, Name, Attribute or Class of the element.

CSS parameters is the required argument for calling animate method. You have to set the CSS properties to give the animated effect to the target HTML element.

speed is the optional argument to define the duration of jQuery Animation. Set it to either “slow”, “fast”, or integer value to represent milliseconds.

callback is the optional argument. It is the function you will want to execute when animation defined with animate method completes.

Code Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#anim").click(function(){
   $("#flower").animate({
	opacity: '0.2',
    height: '60%',
    width: '60%', });
});
});
</script>
</head>
<body style="font-family:arial"> 
<div style="width:40%;background-color:black; color:lightgray; text-align:center; padding-top:10px;padding-bottom:20px"> 
<input type="button" id="anim" value="click to animate" style="background-color:black;color:lightgray;">

</div>
<img src="https://csveda.com/wp-content/uploads/2020/05/flower-1024x678.jpg" id="flower" height="20%" width="20%">
</body>
</html>

One Comment

  1. Jan Shorten said:

    tҺe website іѕ really good, I really like it!

    May 19, 2020
    Reply

Leave a Reply

Your email address will not be published.