Hello friends, today I will tell you through experts php how you can make slider through jquery. So let’s go.
Through jQuery you can use Slide Effect.This means that whenever you click an element of HTML, the slide effect will show.
jQuery also has 3 types of slide effect:
- slideDown()
- slideUp()
- slideToggle()
slideDown()
You can slide down any element through the slideDown Effect.In jQuery, slide down is defined by slideDown ().
Its syntax is as follows:
$(selector).slideDown(speed, callback);
In speed, we can define the speed of slideDown () as in Slow, Fast and milliseconds.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>slideDown()</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#down1").click(function(){
$("#down2").slideDown("slow");
});
});
</script>
<style>
#down2, #down1 {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#down2 {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="down1">Click to slide down panel</div>
<div id="down2">Hello Experts PHP!</div>
</body>
</html>
SlideUp()
Through the slide method you can slide up the element.In jQuery, slide down is defined by slideUp ().In speed we can define the speed of slideUp () as in Slow, Fast and milliseconds.
Syntax:-
$ (selector) .slideUp (Speed, callback);
Example:-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#demo1").click(function(){
$("#demo2").slideUp("slow");
});
});
</script>
<style>
#demo2, #demo1 {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#demo2 {
padding: 50px;
}
</style>
</head>
<body>
<div id="demo1">Click to slide up panel</div>
<div id="demo2">Hello Experts PHP!</div>
</body>
</html>
slideToggle()
Through jQuery slideToggle Effect you can toggles slideDown() and slideUp() method.Through this method you can perform both of them in the same acquittal.
In jQuery, slide Toggle is defined by slideToggle ().
Syntax:-
$(selector).slideToggle(speed, callback);
Example:-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#demo1").click(function(){
$("#demo2").slideToggle("slow");
});
});
</script>
<style>
#demo2, #demo1 {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#demo2 {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="demo1">Click to slide the panel down or up</div>
<div id="demo2">Hello Experts PHP!</div>
</body>
</html>