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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to continue from point in animation.

    I'm building the code below.
    Everything works great, but there's one thing I can't figure out.
    When the mouse leaves a button, it starts the function animateBackground, this takes 500ms. If I hover another button in that time, things get welll... flippy.
    What should happen is that the previous animation is stopped at that point and the new animation starts from that position... if possible even with a littlebit of ease.

    Can someone get me on track here?

    Cheers,

    Jaap

    The Script
    Code:
         $(document).ready(function(){
    		
    	function animateBackground(BackgroundDestination)
    		{
    			$("#numbers").animate({ 
    			marginLeft: BackgroundDestination,
          		}, 500);
          		}
    	   
    	var BackgroundStartPosition = "0px"
    
        $("#home").hover(function(){
    	 	animateBackground("-0px");
        });
        $("#home").mouseout(function(){
    	 	animateBackground(BackgroundStartPosition);
        });
    		
        $("#news").hover(function(){
    	 	animateBackground("-1400px");
        });
        $("#news").mouseout(function(){
    	 	animateBackground(BackgroundStartPosition);
        });	
    	
    	$("#contact").hover(function(){
    	 	animateBackground("-2800px");
        });
        $("#contact").mouseout(function(){
    	 	animateBackground(BackgroundStartPosition);
        });		
    		
         });
    The HTML
    Code:
    <div id="mask">
    	<div id="numbers">Home 1 2 3 4 News 5 6 7 8 Contact</div>
    </div>
    
    <div id="menu">
    	<a id="home" class="menu_item" href="#">Home</a>
    	<a id="news" class="menu_item" href="#">News</a>
    	<a id="contact" class="menu_item" href="#">Contact</a>
    </div>
    The CSS
    Code:
    #numbers {
    	
    	background-color: #333;
    	padding: 50px;
    	font: 60px "Lucida Grande", Lucida, Verdana, sans-serif;
    	word-spacing: 200px;
    	color: #fff;
    	width: 6900px;
    }
    
    #mask {
    	width: 500px;
    	overflow: hidden;
    	border: 7px solid #ece;
    }
    
    #menu a{
    	display: block;
    	float: left;
    	margin-right: 10px;
    	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
    	text-decoration: none;
    	background-color: #000;
    	padding: 3px;
    	color: #fff;
    }
    
    #menu a:hover {
    	text-decoration: underline;
    }
    
    #menu {
    	margin-top: 10px;
    }
    Last edited by jaapoost; 10-07-2009 at 05:20 PM. Reason: Spelling

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Two jquery features that will help you:

    1. Effects/stop() - Stops all the currently running animations on all the specified elements.

    2. Events/hover() - Simulates hovering (moving the mouse on, and off, an object).


    Add those two into your code and you get:

    Code:
    <script type="text/javascript">
    
    function animateBackground(BackgroundDestination){
    	$("#numbers").stop().animate({marginLeft: BackgroundDestination}, 500);
    }
    
    var BackgroundStartPosition = "0px";
    
    $(document).ready(function(){
    
        $("#home").hover(
    		function(event){animateBackground("-0px")},
    		function(event){animateBackground(BackgroundStartPosition)}
    	);
    	
    	$("#news").hover(
    		function(event){animateBackground("-1400px")},
    		function(event){animateBackground(BackgroundStartPosition)}
    	);
    	
    	$("#contact").hover(
    		function(event){animateBackground("-2800px")},
    		function(event){animateBackground(BackgroundStartPosition)}
    	);
    
    });
    </script>
    HTH

  • Users who have thanked Spudhead for this post:

    jaapoost (10-07-2009)

  • #3
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Very smooth! This was what I was looking for!

    Thanks for your help!


  •  

    Tags for this Thread

    Posting Permissions

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