Jquery Fadein

jQuery fadeIn()
jQuery fadeIn() method is used to fade in the element.
Syntax:
1. $(selector).fadein();
2. $(selector).fadeIn(speed,callback);
3. $(selector).fadeIn(speed, easing, callback);
speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales
are slow, fast and milliseconds.
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after

completion of fadein() effect.
Let's take an example to demonstrate jQuery fadeIn() effect.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></scri
pt>
5. <script>
6. $(document).ready(function(){
7. $("button").click(function(){
8. $("#div1").fadeIn();
9. $("#div2").fadeIn("slow");
10. $("#div3").fadeIn(3000);
11. });
12. });
13. </script>
14. </head>
15. <body>
16. <p>See the fadeIn() method example with different parameters.</p>
17. <button>Click to fade in boxes</button><br><br>
18. <div id="div1" style="width:80px;height:80px;display:none;background-
color:red;"></div><br>
color:green;"></div><br>
color:blue;"></div>
21. </body>
22. </html>
next →← prev
jQuery fadeOut()
The jQuery fadeOut() method is used to fade out the element.
Syntax:
1. $(selector).fadeOut();
2. $(selector).fadeOut(speed,callback);
3. $(selector).fadeOut(speed, easing, callback);
speed: It is an optional parameter. It specifies the speed of the delay. Its possible
vales are slow, fast and milliseconds.

completion of fadeOut() effect.
Let's take an example to demonstrate jQuery fadeOut() effect.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></s
cript>
5. <script>
8. $("#div1").fadeOut();
9. $("#div2").fadeOut("slow");
10. $("#div3").fadeOut(3000);
11. });
12. });
13. </script>
14. </head>
15. <body>
16. <p>See the fadeOut() method example with different parameters.</p>
17. <button>Click to fade out boxes</button><br><br>
18. <div id="div1" style="width:80px;height:80px;background-
color:red;"></div><br>
20. <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
21. </body>
22. </html>
jQuery fadeTo()
jQuery fadeTo() method is used to fading to a given opacity.
Syntax:
1. $(selector).fadeTo(speed, opacity);
2. $(selector).fadeTo(speed, opacity, callback);
3. $(selector).fadeTo(speed, opacity, easing, callback);
speed: It specifies the speed of the delay. Its possible vales are slow, fast and
milliseconds.
opacity:It specifies the opacity. The opacity value ranges between 0 and 1.

completion of fadeToggle() effect.
Let's take an example to demonstrate jQuery fadeTo() effect.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></scri
pt>
5. <script>
8. $("#div1").fadeTo("slow", 0.3);
9. $("#div2").fadeTo("slow", 0.4);
10. $("#div3").fadeTo("slow", 0.5);
11. });
12. });
13. </script>
14. </head>
15. <body>
16. <p>See the fadeTo() method example with different parameters.</p>
17. <button>Click to fade boxes</button><br><br>
18. <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
20. <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
21. </body>
22. </html>
jQuery fadeToggle() Method

The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut()
methods.
If the elements are faded out, fadeToggle() will fade them in.
If the elements are faded in, fadeToggle() will fade them out.
Syntax:
$(selector).fadeToggle(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take
the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the fading

completes.
The following example demonstrates the fadeToggle() method with different

parameters:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
____________________________________________________________________
JQUERY SLIDE:
SLIDE DOWN
<!DOCTYPE html>
<html>
<head>
<script>
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
#panel {
padding: 50px;
display: none;
</style>
</head>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>

</body>
</html>
____________________________________________________________________
SLIDEUP:
<!DOCTYPE html>
<html>
<head>
<script>
$("#panel").slideUp("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
#panel {
padding: 50px;
</style>
</head>
<body>
<div id="flip">Click to slide up panel</div>
</body>
</html>
_______________________________________________________________
SLIDE TOGGLE
<!DOCTYPE html>
<html>
<head>
<script>
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
</body>
</html>

Jquery Fadein

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Jquery Fadein

Hochgeladen von

Copyright:

Verfügbare Formate

jQuery fadeIn()

jQuery fadeIn() method is used to fade in the element.

easing: It specifies the easing function to be used for transition.

callback: It is also an optional parameter. It specifies the function to be called after

Let's take an example to demonstrate jQuery fadeIn() effect.

easing: It specifies the easing function to be used for transition.

callback: It is also an optional parameter. It specifies the function to be called after

Let's take an example to demonstrate jQuery fadeOut() effect.

easing: It specifies the easing function to be used for transition.

callback: It is also an optional parameter. It specifies the function to be called after

Let's take an example to demonstrate jQuery fadeTo() effect.

jQuery fadeToggle() Method

The optional callback parameter is a function to be executed after the fading

The following example demonstrates the fadeToggle() method with different

<p>Demonstrate fadeToggle() with different speed parameters.</p>

<button>Click to fade in/out boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

<div id="div2" style="width:80px;height:80px;background-color:green;"></div>

<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

border: solid 1px #c3c3c3;

<div id="flip">Click to slide down panel</div>

<div id="panel">Hello world!</div>

border: solid 1px #c3c3c3;

<div id="panel">Hello world!</div>

border: solid 1px #c3c3c3;

<div id="flip">Click to slide the panel down or up</div>

<div id="panel">Hello world!</div>

Das könnte Ihnen auch gefallen