Foros del Web » Programando para Internet » Javascript » Frameworks JS »

transición en efecto prev/next

Estas en el tema de transición en efecto prev/next en el foro de Frameworks JS en Foros del Web. Hola, Tengo el siguiente código que hace que un conjunto de divs vayan pasando según el botón que se presione (prev/next): @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript ...
  #1 (permalink)  
Antiguo 25/12/2012, 09:43
 
Fecha de Ingreso: agosto-2009
Mensajes: 349
Antigüedad: 11 años, 2 meses
Puntos: 8
transición en efecto prev/next

Hola,

Tengo el siguiente código que hace que un conjunto de divs vayan pasando según el botón que se presione (prev/next):

Código Javascript:
Ver original
  1. <script type='text/javascript'>//<![CDATA[
  2. $(window).load(function(){
  3. // selects all the divs of class='sample',hides them, finds the first, and shows it
  4. $('div.portafolios').hide().first().show();
  5.  
  6. // binds a click event-handler to a elements whose class='display'
  7. $('a.display').on('click', function(e) {
  8.     // prevents the default action of the link
  9.     e.preventDefault();
  10.  
  11.     // assigns the currently visible div.sample element to a variable
  12.     var that = $('div.portafolios:visible'),
  13.         // assigns the text of the clicked-link to a variable for comparison purposes
  14.         t = $(this).text();
  15.  
  16.     // checks if it was the 'next' link, and ensures there's a div to show after the currently-shown one
  17.     if (t == 'next' && that.next('div.portafolios').length > 0) {
  18.         // hides all the div.sample elements
  19.         $('div.portafolios').hide();
  20.  
  21.         // shows the 'next'
  22.         that.next('div.portafolios').show()
  23.     }
  24.     // exactly the same as above, but checking that it's the 'prev' link
  25.     // and that there's a div 'before' the currently-shown element.
  26.     else if (t == 'prev' && that.prev('div.portafolios').length > 0) {
  27.         $('div.portafolios').hide();
  28.         that.hide().prev('div.portafolios').show()
  29.     }
  30. });
  31. });//]]>  
  32. </script>

Código HTML:
Ver original
  1. <div class="portafolios">div1</div>
  2. <div class="portafolios">div2</div>
  3. <div class="portafolios">div3</div>
  4. <a href="#" id="display" class="display">next</a>
  5. <a href="#" id="display1" class="display">prev</a>

Funciona perfectamente, el problema es que la transición entre div y div es muy brusca y quería saber si había algún método para hacer que esta transición tome unos segundos en realizarse (de izquierda a derecha y viceversa).

Espero se haya entendido y puedan ayudarme
  #2 (permalink)  
Antiguo 25/12/2012, 10:19
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 15 años, 6 meses
Puntos: 839
Respuesta: transición en efecto prev/next

Tanto hide() como show() aceptan un parámetro que indica cuánto debe durar la animación de mostrar/ocultar si a eso te refieres:
http://api.jquery.com/hide/
http://api.jquery.com/show/
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 25/12/2012, 10:35
 
Fecha de Ingreso: agosto-2009
Mensajes: 349
Antigüedad: 11 años, 2 meses
Puntos: 8
Respuesta: transición en efecto prev/next

muchas gracias por los links. Lo que busco exactamente es que pasen de derecha a izquierda e izquierda a derecha como si estuvieran en secuencia

Etiquetas: efecto, funcion, javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:22.