Question

This is the html part of the sliders navigation:

<div id="button">
     <a class="button1 active" rel="1" href="#"></a>
     <a class="button2" rel="2" href="#"></a>
     <a class="button3" rel="3" href="#"></a>
</div>

This is the complete jQuery code for the slider:

$(document).ready(function (){
  $('#button a').click(function(){
    var integer = $(this).attr('rel');
    /*----- Width of div mystuff (here 160) ------ */
    $('#myslide .cover').animate({left:-160*(parseInt(integer)-1)})
    $('#button a').each(function(){
      $(this).removeClass('active');
      if($(this).hasClass('button'+integer)){
        $(this).addClass('active')
      }
    });
  });   
});

i am building a content slider for an assignment on college and I am having trouble following this code.

You can find the complete code for this slider here.

Our 3 links have rel attributes with values 1,2 and 3. This line of jQuery calculates how much will the slider slide:

$('#myslide .cover').animate({left:-160*(parseInt(integer)-1)})

So if the variable integer is 1 it will be -160*(1-1)=0 – the slider doesn’t move
if its 2 the result will be -160 and it will move to the right for 160px.
And if its 3 it will move to the right for 320px.

How does this code moves the slide to the left?
It works if you test the demo on the page, but I don’t understand how?
Can someone explain it to me please?

Answer 1

Negative left values will cause the element to move to the left of the 0 position. When you animate from 0 to -160, it will move left.

http://jsfiddle.net/vrRfu/

Am I misunderstanding the question?

A positive integer multiplied by -160 results in a negative left position causing the element to move left.