Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stop Animation from looping

    New to the forum, and very new to JavaScript. Basically I'm using an sprite PNG Sequence for a garage door opening animation. I want it to work on all popular browsers including iPhone/iPad. I want the animation to stop on the last frame (86) and stay there without looping, but can't seem to get it to stop with clearInterval() function

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    
    <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    
    <script language = "javascript">
    
    $(document).ready(function()
    { 
        setInterval(function(){$('#Walk').animate({left: '-=292.5px'},0); if (parseInt($('#Walk').css('left')) < -(292.5 * 86)){ $('#Walk').css('left',0); }}, 70);
    
    
    });
    </script>
    </head>
    <body style = "overflow-x:hidden;">
    <style>
    
    #Door
    {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 292.5px;
        height: 219.5px;
        clip: rect(0 292.5px 219.5px 0);
        z-index: 1000000;
    
    }
    
    #Walk
    {
        position: absolute;
    	padding: 0;
        top: 0;
        left: 0;
        width: 25155px;
        height: 219.5px;
        background: url('http://www.gdshenley.com/images/PNG/small/86test_half.png') no-repeat;
    
    }
    
    </style>
    <div id = "Door"><div id = "Walk"></div></div>
    </body>
    
    </html>
    Any help would be greatly appreciated

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 552 Times in 549 Posts
    there is probably a fancier way to do this, but as a start:

    Code:
    $(document).ready(function () {
    	function moveIt() {
    		if (parseFloat($('#Walk').css('left')) > -(292.5 * 85)) {
    			$('#Walk').animate({
    				left: '-=292.5px'
    			}, 0)
    			setTimeout(moveIt, 70);
    		}
    	}
    	moveIt();
    });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •