CODEWITHSUNDEEP
jqueryhtmlcss
ProllyGeek
ProllyGeek

Reputation: 15836

jQuery .css() top & bottom not working

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/

Upvotes: 0

Views: 1001

Answers (2)

Albin
Albin

Reputation: 2558

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;
}

Upvotes: 1

Albin
Albin

Reputation: 2558

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/

Upvotes: 0

Related Questions