jQuery animate() create slide left and right toggle effect

Description

jQuery animate() create slide left and right toggle effect
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery slideLeft and slideRight Effect</title>
<style>
    .box{/*from w w w  .  j  a v  a 2 s  .  c o  m*/
        float:left;
        overflow: hidden;
        background: #f0e68c;
    }
    .box-inner{
        width: 400px;
        padding: 10px;
        border: 1px solid #a29415;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.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, consectetur adipiscing elit. 
        Nam eu sem tempor, varius quam at, luctus dui. 
        Mauris magna metus, dapibus nec turpis vel, semper 
        malesuada ante. Vestibulum id metus ac nisl bibendum 
        scelerisque non non purus. Suspendisse varius nibh non 
        aliquet sagittis. In tincidunt orci sit amet elementum 
        vestibulum. Vivamus fermentum in arcu in aliquam. 
        Quisque aliquam porta odio in fringilla. Vivamus nisl leo, 
        blandit at bibendum eu, tristique eget risus. Integer aliquet 
        quam ut elit suscipit, id interdum neque porttitor. Integer 
        faucibus ligula.</div>
    </div>
</body>
</html>
Previous Next