jQuery animate() width toggle

Description

jQuery animate() width toggle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slide Left and Right Toggle Effect</title>
<style>
    .box{/* w  w w . j a v  a2  s. co  m*/
        float:left;
        overflow: hidden;
        background: #f0e68c;
    }
    .box-inner{
        width: 400px;
        padding: 10px;
        border: 1px solid blue;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.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, 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