Member Avatar for Behseini

Hi,
Could you please take a look at following link and let me know how I can add a loop to my script in order to repeat the animate() function for example for every 30 seconds?

http://www.geoca.com/Mover/

as you can see the animate function just runs for one time but I would like to repeat it for every 30 seconds.
I also would like to add a function to stop the animation when user mouse over on the Logo div.

Here is the code

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Moving Div</title> 
 
<style type="text/css"> 
#container {
    height: 600px;
    margin: 0 auto;
    width: 985px;
}
 
#content {
    background-color: #EEEEEE;
    border-color: #DDDDDD;
    border-style: solid;
    border-width: 1px;
 	position:relative;
    height: auto;
	margin: 25px 8px 0;
    margin-bottom: 0 auto;
    padding: 15px;
    width: 95%;
	overflow:hidden;
}
 
#logo { 
 background-color: #EBB00C;
    color:black;
    border-color: #F6EFDC;
    border-size:3px;
    border-style: solid;
    border-width: 1px;
    position:relative;
    width:250px;
    padding: 10px;
    margin-left:-300px;
}
</style> 
 
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 
 
<script type="text/javascript"> 
  $(document).ready(function(){
            $('#logo').animate({left:"+=1500"},25000);
     });
</script> 
 
 
</head> 
 
<body> 
<div id="container"> 
<div id="content"> 
<div id="logo">This is For Test</div> 
 
</div> 
</div> 
</body> 
</html>

I appreciate your time in advanced!

  • 2 Contributors
  • 2 Replies
  • 152 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

Behseini,

This is made slightly tricky by the need to perform several calculations.

$(document).ready(function(){
	function getWidth($jq){
		return parseInt($jq.css('width')) + parseInt($jq.css('borderLeftWidth')) + parseInt($jq.css('borderRightWidth')) + parseInt($jq.css('paddingLeft')) + parseInt($jq.css('paddingRight'));
	}
	var animTimeout;
	var $content = $('#content');
	var $logo = $('#logo');
	var pos1 = -( getWidth($logo) + parseInt($content.css('paddingLeft')) );
	var pos2 = getWidth($content) - parseInt($content.css('paddingLeft'));
	$logo.css({left:pos1+'px', marginLeft:0});
	function anim(){
		var t = 25000 * ( pos2 - parseInt($logo.css('left')) ) / (pos2-pos1);//for restart purposes
		$logo.animate({left: pos2 + 'px'}, t, 'linear', function(){
			$logo.css({left: pos1 + 'px'});
			animTimeout = setTimeout(anim, 5000);
		});
	}
	$content.mouseout(anim).mouseover(function(){
		$logo.stop(true,false);
	});
	anim();
});

Airshow

Member Avatar for Airshow

I have just discovered, there's a Pause / Resume Animation plugin, which would simplify my code though probably only slightly.

Airshow

Edited by Airshow because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.