jQuery Overflow hidden animate


HTML:

Use two interlaced <div>-elements.


<div id="box">
    <div id="content">text text text text</div>
</div>

CSS:

The attribute overflow form the surrounding <div> have to be set to hidden .


#box{ overflow:hidden; }

jQuery:

Use for the inner <div> the jQuery .animate() function and animate the margin position.


$("#content").animate({
    marginLeft:"220px", 2000
});

Example: Content move over the left and right side, while the overflow content is hidden.


<!DOCTYPE html>
    <head>
        <style type="text/css">
            #box
            {
                width: 300px;
                height: 100px;
                background: #444;
                overflow: hidden;
            }
            #content
            {
                margin-left: 40px;
                margin-top: 30px;
                width: 300px;
                color: #fff
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
    </head>
    <body onload="contentOverflow()">

        <script type="text/javascript">
            var left = -220;
            function contentOverflow(){
                $("#content").animate({
                    marginLeft:left+"px"
                }, 2000).queue(function(){
                    left*=-1;
                    contentOverflow();
                    $(this).dequeue();
                });
            }
        </script>

        <div id="box">
            <div id="content">Es ist erneut Zeit für eine Episode ... </div>
        </div>
    </body>
</html>

Demo:

Diese Woche ist es erneut Zeit für eine Episode on Tour, ...
© Kometschuh.de | Impressum | GitHub | Facebook |