Trouble understanding this jQuery navigation tutorial

JavaScript
1

I’m just starting out in jQuery, i read this tutorial.

Here’s the demo.

I’m having trouble figuring out step 5 where they actually create the function. I’m having trouble understanding the multiplier parameter?

The job of the multiplier is to increase or decrease the amount that takes the a following link element to slide in to the screen. In other words, if the multiplier is 1, all link elements will slide in to the screen in equal time intervals. However, if it is less than 0, the subsequent link elements will slide in faster, and if it is more than 1 the opposite will happen.

So if the multiplier is 0 or 1, all link elements will come in at the same time?


function slide(navigation_id, pad_out, pad_in, time, multiplier)  
{  
    // creates the target paths  
    var list_elements = navigation_id + " li.sliding-element";  
    var link_elements = list_elements + " a";  
  
    // initiates the timer used for the sliding animation  
    var timer = 0;  
  
    // creates the slide animation for all list elements  
    $(list_elements).each(function(i)  
    {  
        // margin left = - ([width of element] + [total vertical padding of element])  
        $(this).css("margin-left","-180px");  
        // updates timer  
        timer = (timer*multiplier + time);  
        $(this).animate({ marginLeft: "0" }, timer);  
        $(this).animate({ marginLeft: "15px" }, timer);  
        $(this).animate({ marginLeft: "0" }, timer);  
    });  
  
    // creates the hover-slide effect for all link elements  
    $(link_elements).each(function(i)  
    {  
        $(this).hover(  
        function()  
        {  
            $(this).animate({ paddingLeft: pad_out }, 150);  
        },  
        function()  
        {  
            $(this).animate({ paddingLeft: pad_in }, 150);  
        });  
    });  
}

One more thing i don’t understand is that there is an i parameter passed in the function within the each() function. What is that?

Thank you all so much. Really appreciate the help.

2

I’m having trouble figuring out step 5 where they actually create the function. I’m having trouble understanding the multiplier parameter?

The multiplier argument determines the speed in which the anchor links slide in and out, if the number is 1 or greater the speed will be slower where as if its 0 the speed will increase.

One more thing i don’t understand is that there is an i parameter passed in the function within the each() function. What is that?

The variable i refers to the current position in the object in which the jQuery.each() function is running through, the concept is exactly the same as the below example.

for (var i = 0; i < 5; i++) {
    alert('Currently at: ' + i);
}
3

Now i get it. Thanks a million :slight_smile: