jQuery minusing padding when animating left value? Strange.

Question

Hey all,

I was working on a slider using an unordered list. Standard structure, example (not the same code I'm using):

<div style="overflow: hidden;width: 500px;padding: 20px;position: relative">
    <ul style="width: 1000px;position: relative;padding: 0;margin: 0;list-style: none;">
    <li style="width: 500px;padding: 0;margin: 0;float: left;"></li>
    <li style="width: 500px;padding: 0;margin: 0;float: left;"></li>
    </ul>
</div>

using an li width of 500px and a div padding of 20px plus the width of 500px for example. And some jQuery like:

$(div ul).animate({left: position.left-500+"px"});

I noticed by accident through my mistake that the jQuery when sliding the ul left only would slide it 460px in this case. It seems that it is minusing the padding off automatically? And therefore the slided <ul> is off every time.

Any explanation as to why this is happening?

Answer 1

I guess sliding doesn't appreciate the padding of the parent. Note that thing you're sliding, the ul, doesn't have any padding at all.

Try setting the padding on the ul, not the container.

Answer 2

i tried this and works next:

either change ul position to absolute

or animate like $('ul').animate({left: '-=520'+"px"}

20px added only in opera, in ie, ff '-=500' works as expected with relative position

this is my test code

    <div style="overflow: hidden;width: 500px;padding: 20px;position: relative;background-color: black;">
<ul style="width: 1500px;position: relative;padding: 0;  margin: 0;list-style: none; ">
<li style="width: 500px;padding: 0;margin: 0;float: left; background-color: blue;">-</li>
<li style="width: 500px;padding: 0;margin: 0;float: left;background-color: red;">-</li>
<li style="width: 500px;padding: 0;margin: 0;float: left;background-color: green;">-</li> 
</ul>
</div>  

 <script  type="text/javascript">
 $(document).ready(function(){
// $('ul').animate({left: '-=20'+"px"});       
 $('ul').animate({left: '-=500'+"px"});
 $('ul').animate({left: '-=500'+"px"});    

 })
</script>

Answer 3

There are 20px left + 20px right = 40px padding in your first div when you subtract from width,that's 460px.

Padding unites with width of element.If you remove padding or increase width,that should do it.
Best Regards