In this tutorial we will use w3schools.com for jquery hide/show,fade,slide.
Let's dive into it.
This is our HTML structure
for simplicity, we will use visual studio code.
<!doctype html>
<html lang="en">
<head>
<title>Jquery within 1 hour</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
$(()=> {
//
})
</script>
</body>
</html>
1. Jquery Selector
Example of selector below
- $("p")
- $(".demo")
- $("#demo")
- $("[data-attr]")
- $("ul li") example
<button id="demo">Click Me</button>
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled link</a>
</li>
</ul>
<script>
$(()=> {
//
$('#demo').click(()=> {
$('[class*="nav justify-content"]').toggle()
})
})
</script>
2. Jquery Event
for the jquery event, we will just remove our prefix "on" like click,dblclick,mouseleave,load,change instance of onclick,ondblclick,onmouseleave,onload,onchange.
Example below
$(()=> {
$('button').click(()=> {
alert("Hello Button")
})
})
click mean onclick at vanilla js.
3. Jquery hide/show
like we use the above button and we can use the same way to toggle the HTML
example 1
$(()=> {
$('button').click(()=> {
$('ul').hide()
})
})
hide() add display: none css style
$(()=> {
$('button').click(()=> {
$('ul').show()
})
})
show() remove the display: none
another callback is toggle() it toggle the HTML to display: none;
$(()=> {
$('button').click(()=> {
$('ul').toggle()
})
})
Inside toggle,hide,show paranthesis we also can add transition effect like toggle(2000) mean 2 second.
we can use different way to get the transition liek
*toggle(2*2000) // 2s;
*toggle("slow") // slow
toggle("fast") // fast
4. Jquery fade
if you know jquery hide/show that's mean you know jquery fade effect.
Jquery has the following fade method.
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
Example
$(()=> {
$('button').click(()=> {
$('ul').fadeToggle("slow")
})
})
4. Jquery Slide
Jquery has the following slide method.
- slideDown()
- slideUp()
- slideToggle()
so hide/toggle, fade, slide this 3 effect is the different but the same way we can use.
example
$(()=> {
$('button').click(()=> {
$('ul').slideToggle("slow")
})
})
This is our simple hide/show, fade, slide jquery tutorial.
For simple landing page jquery is always good to use.
For large project there are several library reactjs,angularjs is good to use.
If you like this short tutorial please like, comment, and share for encouraging more posts.
Thanks.
Top comments (0)