SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble understanding this jQuery navigation tutorial

    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?

    Code:
    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.
    Jaysone

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

    Code:
    for (var i = 0; i < 5; i++) {
        alert('Currently at: ' + i);
    }
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thank you so much

    Now i get it. Thanks a million
    Jaysone


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •