En ejemplo uso mouseenter y se ve bien, pero quiero que mientras el puntero del mouse este sobre la capa arriba o abajo siga subiendo o bajando, solo lo hace una vez y no se como hacer que siga.
acá les dejo todo el código para que lo revisen:
Código HTML:
<!DOCTYPE HTML> <html lang="es"> <head> <meta charset="UTF-8"> <title>Demo de Carrusel</title> <style type="text/css"> *{margin:0; padding:0;} body{ background-color:#333; margin-top:5%; } .cuerpo{ background-color:#222; width:280px; border-radius:10px; margin:auto; padding: 5px; } .arriba{ width: 271px; margin: auto; } .arriba:hover{ cursor: pointer; } .abajo{ width: 271px; margin: auto; } .abajo:hover{ cursor: pointer; } .contenedor{ width: 271px; margin: auto; height: 260px; overflow: hidden; } .centro{ width: 100%; position: relative; } .adentro{ width: 100%; height: 80px; position: relative; margin: 5px auto; background-color: #4082ae; } .adentro img{ position: relative; margin-top: 2px; } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> $(document).ready(function() { $(".arriba").mouseenter(function(){ $('.centro').animate({top:'+=50px'}, 500); }); $(".abajo").mouseenter(function(){ $('.centro').animate({top:'-=50px'}, 500); }); }); </script> </head> <body> <div class="cuerpo"> <div class="arriba"> <img src="http://goo.gl/V512t" alt=""> </div> <div class="contenedor"> <div class="centro"> <div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div> <div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div> <div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div> <div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div> <div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div> <div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div> <div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div> <div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div> <div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div> <div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div> </div> </div> <div class="abajo"> <img src="http://goo.gl/tYZcl" alt="" width="271"> </div> </div> </body> </html>
