I have some animated text using the top and left css properties. But, everything starts from the top left of my screen. How could I make the animation start from the center, and then float out from there?
Example Page: http://www.puc.edu/media/reasons/who-is-god jQuery Code: <script type="text/javascript"> $(document).ready(function(){ // Start floater function var floater = function() { $('.floater').each(function() { // Random Times var timeout = Array(); timeout[0] = 4000; timeout[1] = 5000; timeout[2] = 10000; timeout[3] = 15000; timeout[4] = 20000; timeout[5] = 25000; timeout[6] = 30000; var time = timeout[Math.floor(Math.random() * timeout.length)]; $(this).animate({ 'marginTop':(Math.random() * $(window).height()) + 'px', 'marginLeft':(Math.random() * $(window).width()) + 'px' }, time,'swing',function(){ setTimeout(floater,10); });// End animate });// End each }// End floater // Execute our function floater(); // Stop animation when button is clicked $('.floater').mouseover(function(){ $(this).stop(); $(this).children('p').fadeIn('slow'); }); $('.floater').mouseout(function(){ //floater(); }); // Add our colors $('.floater').each(function() { // Create array of colors var colors = Array(); colors[0] = '#66ff44'; colors[1] = '#9900ff'; colors[2] = '#ff11ff'; colors[3] = '#ff2266'; colors[4] = '#ff7755'; colors[5] = '#ffbb55'; colors[6] = '#eeff33'; // Random hex value var color_hex = colors[Math.floor(Math.random() * colors.length)]; $(this).css('color', color_hex); });// End each });// End ready </script>