Question

Im wanting the logo on Gone Freelancing to be and animated drop in on page load by Jquery, like when you click more for the modal. Once i learn how to do this i will create the same effect for the map markers only to drop in. Can anyone point me in the right direction? Ive searched google and can only find fade’s

Your help is much appreciated!

Thanks in advance, Roy
http://roybarber.com

Answer 1

You will have to make it a separate object (i.e. absolute-positioned) that can move up and down without disrupting the remainder of the page. Remember the CSS “top” value when it looks all right. This will be the value where you slide the element to.

Then, set the “top” of the object to some negative amount (i.e. -500px) and use this code to make the div (with assumed id of “logo”) slide down

$("#logo").load(function(){
    $('#logo').animate(
       {top:'400px'}, 
        100, // speed of animation in milliseconds
        function() {
           // Do something when animation is complete
        }
    );
});

You can read more about JQuery custom animations here: http://api.jquery.com/animate/