jQuery fadeToggle
jQuery Tutorial » jQuery fadeToggle
What is fadeToggle jQuery?
The fadeToggle() method in jQuery toglle between the two fadeIn () and fadeOut () methods.
If items are faded in, then fadeToggle() will fade out. If items are faded out, then fadeToggle() will fade in.Syntax:
$(selector).fadeToggle(speed,callback);
$(selector).fadeToggle();
The optional speed parameter specifies the duration of the effect and may have the following values as "slow", "fast" or milliseconds.
Easing parameter is an optional used to specify the speed of item to different points of animation.
The next callback parameter which can also be optional and is a function that is called after completion of fadeToggle() effect.
jQuery simple fadeToggle() effect.
A simple example of the fadeToggle() method we are fading in or fading out the box.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of fadeToggle() in jquery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("#butt").click(function(){
$("#Rightangle").fadeToggle();
});
});
</script>
</head>
<body>
<button style="padding:10px 20px; background:#090; color:#EFEFEF" id="butt">Click to fadein or fadeout box</button>
<div id="Rightangle" style="background:red;height:100px;width:250px;margin:6px;"></div>
</body>
</html>
Related subjects:
jQuery FadeIn()
jQuery FadeOut()
Effects hide / show
jQuery selectors
Tags: jQuery fadeToggle: display flex, not working, class, start hidden, delay, opacity, stop, fast,
What is fadeToggle jQuery?
How do you fade toggle fadeIn jQuery?
What is fadeIn and fadeOut in jQuery?
How do I fadeOut text in jQuery?
fadeToggle() With Duration Parameter - Example
Example demonstration the fadein or fadeout effects with speed by using string parameter
Example demonstration the fadein or fadeout effects with speed 2000 milliseconds.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of fadeToggle() in jquery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#p1").fadeToggle("slow");
$("#p2").fadeToggle(2000);
});
});
</script>
</head>
<body>
<button id="btn">Click to fadein or fadeout paragraph</button>
<p id="p1"> Example demonstration the fadein or fadeout effects with speed by using string parameter</p>
<p id="p2"> Example demonstration the fadein or fadeout effects with speed 2000 milliseconds</p>
</body>
</html>
fadeToggle effect with alert message - callback function
fadeOut() and fadeIn() effect with alert message - Example:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#butt").click(function(){
$("#div1").fadeToggle(2000, function(){
alert("The fading effect is completed.");
});
});
});
</script>
</head>
<body>
<button style="padding:10px 20px; background:#090; color:#EAEAEA" id="butt">Click to fadeIn() or fadeOut() box</button><br><br>
<div id="div1" style="width:50%;height:50px;background-color:Blue;text-align:center;">
<a style="line-height:50px;">Example for the JQuery fadeToggle() method</a>
</div>
</div>
</body>
</html>
jQuery fadeToggle: display flex, not working, class, start hidden, delay, opacity, stop, fast,
What is fadeToggle jQuery?
How do you fade toggle fadeIn jQuery?
What is fadeIn and fadeOut in jQuery?
How do I fadeOut text in jQuery?
JQuery fadeToggle - jquery
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.