jQuery .css() top & bottom not working

Question

For a css I know already that opposite properties like left & right or top & bottom , may conflict with each other , in other words only one of opposite properties should be defined , and the other should be left auto.

The issue Iam having here is jQuery css along with transition , I have a div inside a container , the container overflow is set to hidden , the div inside container has a larger height than container itself , what Iam trying to do is smooth scrolling upon hovering the guide ( which is another div that has same container height and is in top of the div that we want to scroll inside the container).

First I tried calculating delta which is delta_scroll = height of the div we want to scroll - height of container, and then changing the css(top) property of div, and this worked perfectly.

But now im trying to use css solution which is setting bottom to 0px , or top to 0px upon moving mouse , for some reason the transition doesn't work , and I dont know the reason.

Here is an example for calculating scroll_delta: http://fiddle.jshell.net/prollygeek/JG48k/1/

and here is example for css issue: http://fiddle.jshell.net/prollygeek/JG48k/2/

Albin · Accepted Answer · 2014-03-01 15:28:55Z

1

Another option:

Background-position might be better suited for this, if you don't want to calculate the height and use a negative value like my other example. http://jsfiddle.net/mpLZR

div{
  width:800px;
  height:500px;
  background:url('http://www.canvaz.com/portrait/charcoal-1.jpg') no-repeat;
  background-position:top left;
  -webkit-transition:background-position 1s ease;
}
div:hover{
  background-position:bottom left;
}

answered Mar 1, 2014 at 15:28

Albin

2,5612 gold badges30 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Albin · Accepted Answer · 2014-03-01 15:19:48Z

0

This is not a problem with jQuery. Transitions doesn't work with "auto" css properties.

I changed to switch between top: 0 and a negative value, and now it works http://fiddle.jshell.net/d7kbG/

edited Mar 1, 2014 at 15:19

answered Mar 1, 2014 at 14:19

Albin

2,5612 gold badges30 silver badges28 bronze badges

6 Comments

Albin Over a year ago

Empty strings in jQuerys css() - method is the same as auto.

ProllyGeek Over a year ago

but the image doesnt move properely , it just moves to the preset top value which is -400 not to bottom 0px

Albin Over a year ago

This still is the solution for your problem. You have to transition between two different values of the same property, auto or empty string isn't a value, but a lack of a value.

Albin Over a year ago

And background-position might be better suited for this, if you don't want to calculate the height and use a negative value like my other example. jsfiddle.net/mpLZR

ProllyGeek Over a year ago

actually i like the second solution , you may submit it as the primary one so i can choose it as correct solution , Thanks.

|

Collectives™ on Stack Overflow

jQuery .css() top & bottom not working

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related