Keeghan McGarry Keeghan McGarry - 1 year ago 74
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!

Answer Source

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 {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download