Animate a display inline to block change

Question

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

$('#page_header_logo_img').css({
    "padding-left":"20%",
    "display":"inline"
})

at one point and then later call

$('#page_header_logo_img').css({
    "padding-left":"0",
    "display":"block"
})

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.

EDIT FOR ANSWER

I accepted the answer that got me closest, and also answered the question I asked. However it didn't quite get me what I wanted, so thought I would post the final solution here.

I changed the image to be position: absolute; and then dynamically set the margin and the left property.

You can see a working JSFiddle here

`display` is not a transitionable property. Sorry. Impossible to do. — Marcos Pérez Gude, Jul 05 '16 at 10:43
Here you are a list of animated properties in CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties — Marcos Pérez Gude, Jul 05 '16 at 10:43

score 3 · Answer 1 · answered Jul 05 '16 at 10:46

You can consider using CSS transitions.

Adding transition: padding-left 0.3s ease-in-out; to the styles of #page_header_logo_img gives it an animated transition when moving left.

See here in your JSFiddle. It is not very polished but you can see how the CSS transition can be used.

See this for more information of CSS transitions.

score 1 · Accepted Answer · answered Jul 05 '16 at 10:46

1

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();
if(scrolPos>100){
  $('#page_header_logo_img').animate({
    paddingLeft:"20%"
  });
} else {
  $('#page_header_logo_img').animate({
    paddingLeft:"0"
  });
};

answered Jul 05 '16 at 10:46

Gaurav Aggarwal

9,809
6
36
74

Will probably accept this as the answer as it gets me the closest, however I change padding to margin but now wont switch back to auto https://jsfiddle.net/ka5jj0ay/6/ – Keeghan McGarry Jul 05 '16 at 10:59
Yeah bt not the perfect solution...its a kind of strange behaviour that auto is not working rest values are working – Gaurav Aggarwal Jul 05 '16 at 11:20
i think its because jQuery needs a number, hence the new calculation – Keeghan McGarry Jul 05 '16 at 11:22
i think you read this http://stackoverflow.com/questions/4511036/jquery-animate-margins-to-auto...well thats also a solution and ofcourse learned a thing.. – Gaurav Aggarwal Jul 05 '16 at 11:26

score -1 · Answer 3 · answered Jul 05 '16 at 10:48

You are just changing the CSS properties and so there is an jump.

Use the jQuery .animate() method for smooth transition. Change you code as below.

$('#page_header_logo_img').animate({
  "padding-left": "20%",
  "display": "inline"
})

and

$('#page_header_logo_img').animate({
  "padding-left": "0",
  "display": "block"
})

Animate a display inline to block change

3 Answers3