AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

jQuery fadeToggle


<< Previous Page
jQuery tutorial
Next Page >>
jQuery tutorial

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, easing, callback );
$(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.

<!DOCTYPE html>
<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.

<!DOCTYPE html>
<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:

<!DOCTYPE html>
<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

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


0
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


jQuery replace...
jQuery replaceClass...
jQuery click ()...
jQuery switchClass()...
jQuery draggable()...
jQuery HTML...
jQuery scroll smooth...
jQuery scroll()...
jQuery stop()...
jQuery animate()...
jQuery SlideToggle()...
jQuery slideDown()...
jQuery slideUp()...
jQuery fadeToggle...
jQuery fadeOut()...
jQuery fadeIn()...
jQuery Effects - hide () and show ()...
jQuery Events...
jQuery Attributes...
jQuery Selectors...