Buenas tardes a todos (y buenos dias, para los que se levantan ahora)
vengo con otro dilemas de los mios, a ver si entretodos lo sacamos, pues seguramente sea mas problema de planteamiento que otra cosa, paso a explicar:
Estoy desarrollando el tipico pase de fotografias, estilo slide (como tantos plugins jquery que ahi por ahi que hacen esto mismo). La presentación se compone de dos partes, una donde se van viendo las fotos de forma individual a tamaño grande, y otra donde ahi un monton de miniaturas que al irle haciendo click, va cargando una foto u otra. Hasta aqui todo genial, funciona sin problemas, el inconveniente se prensenta, a la hora de gestionar las miniaturas.
la estructura es simple, un div que envuelve, y una lista de boliches que almacena las miniaturas (formateadas, para que una este alado de otra, en una unica linea).
Asi es como consigo el efecto carrousel (el <ul> se va desplazando relativamente dentro del <div> que tiene medidas fijas, y overflow:hidden).
Hasta aqui, creo que es facil comprender lo que intento hacer, ahora el problema:
vengo usando la funcion animate de jquery, para hacer el efecto de desplazamiento, y en principio funciona, pero no de la manera que desearia, ya que si tenemos por ejemplo 30 fotos, el <ul> puede llegar a medir bastante (unos 2500px o por ahi), si partimos desde Left:0, para llegar al final de los 2500px en el tiempo establecido, me corre a la velocidad pero, al intentar el efecto contrario (ir atras) (imagenimos que paramos sobre 300px) al volver desde 300px a 0 de left, lo hace dentro del tiempo establecido, provocando que se note superlento el desplazamiento.
Con el codigo quizas los veais mas claro, aqui lo teneis (es una funcion que genera dinamicamente los manejadores):
Código:
if(tc=='inline'){
var uls = $('.thumbs'); //guardamos el ul, para usarlo en las funciones
var inl = parseInt($('.inline').css('width')); //guardamos el ancho del contenedor por donde corre el ul
var lis = $('.thumbs li'); //Guardamos el listado de li
var anul = ( //Calculamos el tamaño que tendra el ul
parseInt(lis.css('width')) + //sumamos el ancho del li
parseInt(lis.css('margin-left')) + //sumamos el margen izquierdo del li
parseInt(lis.css('margin-right')) + //sumamos el margen derecho del li
parseInt(lis.css('padding-left')) + //sumamos el padding izquierdo del li
parseInt(lis.css('padding-right')) + //sumamos el padding derecho del li
parseInt(lis.css('border-left-width')) + //sumamos el borde izquierdo del li
parseInt(lis.css('border-right-width')) ) * //sumamos el borde derecho del li
lis.size(); //multiplicamos por el numero de li, que contiene el ul
uls.css({'width':anul+'px'}); //aplicamos el tamaño que tendra el ul
var timer = 500;
var time = lis.size()*timer;
nav = $("<div />"); //Creamos el objeto "div"
var be = $("<div />", //Creamos el objeto div, al que añadiremos las siguientes propiedades
{
id: 'thumb'+b+id, //Añadimos Id al controlador
"class": 'thumb'+b, //Añadimos la clase (especidicado entre comillas, para evitar conflicto con la palabra clave de javascript)
text: cb, //Añadimos el texto que contendra
}
);
be.hover(function () {uls.animate({'left':'0px'},time,'linear');},function(){uls.stop(true);});
nav.append(be); //incluimos el elemento formado en el objeto nav
var ne = $("<div />", //Creamos el objeto div, al que añadiremos las siguientes propiedades
{
id: 'thumb'+n+id, //Añadimos Id al controlador
"class": 'thumb'+n, //Añadimos la clase (especidicado entre comillas, para evitar conflicto con la palabra clave de javascript)
text: cn, //Añadimos el texto que contendra
}
);
ne.hover(function () {uls.animate({'left':parseInt($('.inline').css('width'))-anul+'px'},time,'linear');},function(){uls.stop(true);});
nav.append(ne); //incluimos el elemento formado en el objeto nav
$(this).append(nav); //incluimos el elemento formado en el dom
}
Entonces lamentable llege a la conclusion que con animate de jquery no iba a poder conseguirlo, debido a este problema (el tiempo se calcula en base a las miniaturas que ahi, por lo que al comenzar al principio "cerca de lo que sera el final de la anim" hace que vaya relento). Con animate puedo especificar una duración, pero no una velocidad de desplazamiento. entonces es cuando recurro a ustedes. Alguien se le ocurre como podria hacer este efecto de desplazamiento siguiendo una velocidad constante, independientemente de que este al final o al principio de la "meta", no debe ser dificil porque he visto como dije al principio, muchos plugins slide de jquery que hacen esto mismo, si me podeis echar un cable, os estare muy agradecido.
Un saludo comunidad!