jQuery .slide Efecto derecho

Necesito una etiqueta div para deslizar en el lado derecho de la pantalla, ¿cómo puedo obtener este efecto con jQuery? He estado buscando aquí: http://api.jquery.com/category/effects/sliding/ y no parece ser lo que estoy buscando …

Si está dispuesto a incluir la biblioteca jQuery UI , además de jQuery, puede simplemente usar hide() , con argumentos adicionales , de la siguiente manera:

 $(document).ready( function(){ $('#slider').click( function(){ $(this).hide('slide',{direction:'right'},1000); }); }); 

Demostración de JS Fiddle .


Sin usar jQuery UI, puedes lograr tu objective simplemente usando animate() :

 $(document).ready( function(){ $('#slider').click( function(){ $(this) .animate( { 'margin-left':'1000px' // to move it towards the right and, probably, off-screen. },1000, function(){ $(this).slideUp('fast'); // once it's finished moving to the right, just // removes the the element from the display, you could use // `remove()` instead, or whatever. } ); }); }); 

Demostración de JS Fiddle

Si elige usar la interfaz de usuario de jQuery, le recomiendo que se vincule con el código alojado en Google, en: https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min. js

Otra solución es usar .animate () y CSS apropiado.

p.ej

  $('#mydiv').animate({ marginLeft: "100%"} , 4000); 

JS Fiddle

    Intereting Posts