Keeghan McGarry Keeghan McGarry - 3 months ago 10
jQuery Question

Animate a display inline to block change

I am trying to create a sticky header which changes size when the page is scrolled.
One of the main features I want to implement is that an image in the header shrinks down and moves to the left.

So far I have the shrinking down working nicely all animated.
I also have the moving to the left working, but its not animated.

In jQuery I am calling


at one point and then later call


Which works beautifully for moving it to exactly where I want... only problem is it jumps there.

I have tried incorporating the jQuery Animate effect but couldn't get it to work.

Here is a JSFiddle of what I currently have
All I need is for the movement left and right to be smooth and not instant.

Any and all help appreciated!


if you want animation effect you can use .animate() instead of .css() but you can use display in it because display will not work in .animate().

Rest the function would be like this

var scrolPos = $(window).scrollTop();
} else {