Paginas Horizontales con jquery

[migferpedia77]

hola a todos.
He encontrado este codigo para una pagina horizontal

$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
/*
if you want to use one of the easing effects:
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500,'easeInOutExpo');
*/
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});

lo que quisiera saber es en el animate() coloca scrollLeft:----, ese scrollLeft es obligatorio para que funcione el código, es una variable o que es realmente por que no entiendo como funciona dentro de animate(). O mejor si me pueden explicar el código sería maravilloso.

GRACIAS

[gebremswar]

Hola migferpedia77.

Si te has fijado muy bien se trata de dos funciones, solo que una esta comentada. Separándolas quedarían de la siguiente manera:

Esta es la que está comentada: (código 1)

Código Javascript:

$(function() {
    $('ul.nav a').bind('click',function(event){
        var $anchor = $(this);
        /*if you want to use one of the easing effects:*/
        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
            }, 1500,'easeInOutExpo');
        event.preventDefault();
    });
});
 

Y esta es la que está activa o utilizable, por así decirlo. (código 2)

Código Javascript:

$(function() {
    $('ul.nav a').bind('click',function(event){
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
            }, 1000);
        event.preventDefault();
    });
});
 

La primera (la que corresponde a la función comentada), como podrás leer, traducido: "si desea utilizar uno de los efectos de transición" para lo cual se le envia 'easeInOutExpo' después del la duración para lo cual es necesaria la libreria "jquery.easing.js".

Paso a tomar el código 2function para explicarte cada linea.

linea:2
- ('ul.nav a')
Se aplica un filtro en el selector para poder obtener el elemento <a> que estea en un <ul> con clase "nav"; por ejemplo:

HTML Example

Código HTML:

<ul class="nav">
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
</ul>
 

en donde se encuentran 2 elementos que cumplen con el filtro.

- .bind('click',function(event)
Al metodo bind() se le pasa como valor el evento 'click', lo que indica que se ejecutará la funcion al hacer Click sobre ese elemento capturado, en esta caso "<a>".
Todos los eventos manejados por jQuery se transmiten al callback mediante el primer argumento de la función anónima que lo ejecuta, en este caso se trata del argumento event que por convención suele usarse la letra "e".

linea:3
-$anchor almacenará lo obtenido en el filtro usando $(this) para indicárselo.

linea:4
- Se le aplicará el método .stop() a lo indicado en el selector en este caso html, body. El método stop detendrá cualquier efecto que se esté realizando, haciendo que si le enviamos un nuevo efecto, este corra tranquilamente.
Seguido a ésto se le aplica el método .animate() es cual se encargará de realizar, como su mismo nombre lo indica, la animacion correspondiente a lo que se le indica en las properties, options.

Se puden animar dos propiedades no-estilo personalizadas, se trata de scrollTop y scroll; para este caso scrollLeft se les debe indicar la ubicación del elemento a donde se debe desplazar; para este caso scrollLeft espera una cantidad, que le indicara en donde se ubica el elemento a donde debe desplazarse.

-> attr('href') devolvera el valor del atributo 'href'
-> offset().left devolvera el valor del offsetwidth

Tomando como ejemplo el HTML Example que escribí mas arriba supongamos que cada uno de los 3 <a> apunta a 3 secciones de la pagina respectivamente y estas secciones tienen un ancho de 100px, haciendo click en el numero 3, aplicando todo junto "$($anchor.attr('href')).offset().left" obtendríamos el valor de 200 (el offsetwidth ) distancia a la cual se encuentra la seccion3 desde el elemento actual de encontrarnos inicialmente en la seccion1; quedando scrollLeft : 200. el siguiente valor que se le pasa a animate es 1000 el cual indica la duración en mili-segundos.

Finalmente, pero no por ello menos importante, .preventDefault() se encarga de cancelar o evitar el comportamiento por defecto del navegador frente a un determinado evento, en este caso dirigir a la ruta de las etiquetas <a>. Como se puede observar en la linea 2 del código javascript se introdujo un argumento, event, y ahora se ejecuta sobre él el método preventDefault().



Para conocer al detalle cada método mencionado, puedes consultar la api de JQuey: http://api.jquery.com/

http://api.jquery.com/event.preventDefault/
http://api.jquery.com/animate/
http://api.jquery.com/offset/
http://api.jquery.com/stop/
http://api.jquery.com/bind/
http://api.jquery.com/attr/