jQuery Effects
1. hide(), show(), toggle()
These functions show, hide, or toggle the visibility of elements.
<button id="toggleBtn">Toggle Box</button>
<div id="box1" style="width:100px;height:100px;background:green;margin-top:10px;"></div>
<script>
$(document).ready(function(){
$('#toggleBtn').click(function(){
$('#box1').toggle();
});
});
</script>
2. fadeIn(), fadeOut(), fadeToggle()
These methods fade elements in or out with animation.
<button id="fadeBtn">Fade Box</button>
<div id="box2" style="width:100px;height:100px;background:blue;margin-top:10px;"></div>
<script>
$(document).ready(function(){
$('#fadeBtn').click(function(){
$('#box2').fadeToggle();
});
});
</script>
3. slideDown(), slideUp(), slideToggle()
These methods create sliding up/down transitions.
<button id="slideBtn">Slide Box</button>
<div id="box3" style="width:100px;height:100px;background:red;margin-top:10px;display:none;"></div>
<script>
$(document).ready(function(){
$('#slideBtn').click(function(){
$('#box3').slideToggle();
});
});
</script>
4. Custom Animation with animate()
The animate() function lets you change multiple properties with animation.
<button id="animateBtn">Animate Box</button>
<div id="box4" style="width:100px;height:100px;background:orange;margin-top:10px;position:relative;"></div>
<script>
$(document).ready(function(){
$('#animateBtn').click(function(){
$('#box4').animate({
left: '+=100px',
height: 'toggle',
opacity: 0.5
}, 1000);
});
});
</script>
If you have any questions, feel free to ask. Thank you for reading!
If you have any query or question, please contact through below form. Our team will be in touch with you soon.
Please provide your valueable feedback or suggession as well.