In this article we will discuss to create slide silde using id or class property using fadeOut () and fadeout() property. We can also set motion fast ,slow,medium and time line using the property.
Example:
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>slide property injquery</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#animate').click(function () {
var box = $('.box');
if (box.is(':visible')) {
box.fadeOut('slow');
} else {
box.fadeIn('slow');
}
});
});
</script>
<style type="text/css">
div {
display: inline-block;
float: left;
color: #fff;
font-size: 13px;
padding-left: 5px;
}
.button {
background-color: #FF9800;
color: white;
margin: 20px;
padding: 10px;
}
.first {
width: 250px;
height: 200px;
background: #149DAF;
}
</style>
</head>
<body>
<div class="content">
<h2 style="color: #325696">slide using id& class property in jquery</h2>
<div>
<input type="button" id="animate" class="button" value="animate" />
</div>
<div class="box first">
<p>
<b>fade effect in jquery </b></br>
var box = $('.box');
if (box.is(':visible')) {
box.fadeOut('slow');
} else {
box.fadeIn('slow');
}
</p>
</div>
</div>
</body></html>
Output:
Post your comments / questions
Recent Article
- How to enable Search Feature in Django admin?
- How to check PAN-Aadhaar is Linked or NOT?
- How to customize pagination for django admin?
- How to fix HAXM is not installed |in Android Studio
- How to fix CMOS Checksum Error in Computer or Laptop | SOLVED
- Reactivating windows after a Hardware change on PC or Laptop
- FIXED: Windows reported that the hardware of your device has changed. Error code :0xc004F211
- "redirect" is not defined pylance("reportUndefinedVariable)
Related Article