Primero que nada les dejo mis codigos para referencia: CSS:
Código:
#descripcion{
position: absolute;
background: gray;
width: 260px;
height: 138px;
text-align: justify;
margin-top: 167px;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}
#recorrer{
margin-right: 10px;
top: 20px;
position: absolute;
background-color: white;
}
Código HTML:
<div id="descripcion">
<div id="recorrer">
<!-- aqui va un texto traigo de php (contenido dinamico) -->
</div>
</div>
JQuery:
Código:
$(document).ready(function($){
$('#recorrer').mouseenter(function(){
var holis = $("#recorrer").height();
holis = ((-holis)+138);
if (holis<0){
var juan = ((-holis)/8);
$("#recorrer:hover").css({"top":holis});
$("#recorrer").css({"transition":"top "+(juan)+"s","-webkit-transition":"top "+(juan)+"s"});
}
});
$('#recorrer').mouseleave(function(){
$("#recorrer").css({"transition":"top 1s","-webkit-transition":"top 1s"});
$("#recorrer").css({"top":"20px"});
});
});
Resulta que mando a traer datos de MySql mediante PHP lo cual me genera 6 entradas (publicaciones) las cuales obviamente tiene diferente contenido (unos mas grandes que otros), por lo cual el id recorrer tiene diferente valores, al momento de mostrar el contenido se mira muy bien pero el problema es al momento de ejecutar los eventos JQuery solo se ejecuta en la primera entrada, en los demas ignora completamente el JQuery.
Un ejemplo de una pagina de la cual se me dio la idea, si se dan cuenta cada entrada tiene este recorrido, en mi caso solo lo hace la primera
LINK: http://www.deviantart.com/literature/
Anticipadamente muchas gracias por su ayuda y espero sus respuestas como dudas.
Saludos Israel Pina desde Hermosillo, Sonora, Mexico