Q:

How to create jQuery slide left and right toggle effect

mhmadesk
Save to bookmark
|
2022-05-18
|
  360 
Very Easy
-1

How to create jQuery slide left and right toggle effect

JQUERY,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-18
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the jQuery animate() method

There are no such method in jQuery like slideLeft() and slideRight() similar to slideUp() and slideDown(), but you can simulate these effects using the jQuery animate() method.

Let's take a look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slideLeft and slideRight Effect</title>
<style>
    .box{
        float:left;
        overflow: hidden;
        background: #f0e68c;
    }
    /* Add padding and border to inner content
    for better animation effect */
    .box-inner{
        width: 400px;
        padding: 10px;
        border: 1px solid #a29415;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        var boxWidth = $(".box").width();
        $(".slide-left").click(function(){
            $(".box").animate({
                width: 0
            });
        });
        $(".slide-right").click(function(){
            $(".box").animate({
                width: boxWidth
            });
        });
    });
</script>
</head>
<body>
    <button type="button" class="slide-left">Slide Left</button>
    <button type="button" class="slide-right">Slide Right</button>
    <hr>
    <div class="box">
        <div class="box-inner">Lorem ipsum dolor sit amet...</div>
    </div>
</body>
</html>

There is an even better way to create this effect. The following example will slide toggle the box from right-to-left and left-to-right something like slideToggle() effect.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Slide Left and Right Toggle Effect</title>
<style>
    .box{
        float:left;
        overflow: hidden;
        background: #f0e68c;
    }
    /* Add padding and border to inner content
    for better animation effect */
    .box-inner{
        width: 400px;
        padding: 10px;
        border: 1px solid #a29415;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        $(".slide-toggle").click(function(){
            $(".box").animate({
                width: "toggle"
            });
        });
    });
</script>
</head>
<body>
    <button type="button" class="slide-toggle">Slide Toggle</button>
    <hr>
    <div class="box">
        <div class="box-inner">Lorem ipsum dolor sit amet...</div>
    </div>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

JavaScript / jQuery Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to animate div height on mouse hover using jQu... >>
<< How to create jQuery slide up and down toggle effe...