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
:
Ver original$(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
:
Ver original$(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 2
function 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 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/