jQuery .slideRight effect

Question

J'ai besoin d'une balise div pour glisser sur le côté droit de l'écran, comment puis-je obtenir cet effet avec jQuery? J'ai regardé ici: http://api.jquery.com/category/effects/sliding/ et il ne semble pas être ce que je cherche ...

Answer 1

Si vous êtes prêt à inclure la bibliothèque jQuery UI, en plus de jQuery lui-même, alors vous pouvez simplement utiliser hide(), with additional arguments, comme suit:

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

      }); 
    }); 

JS Fiddle demo.

---

Sans utiliser jQuery UI, vous pouvez atteindre votre objectif en utilisant simplement 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. 
         } 
         ); 

      }); 
    }); 

JS Fiddle demo

Si vous choisissez d'utiliser jQuery UI, alors je vous recommande un lien vers la Code hébergé par Google, à: https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js

Answer 2

Une autre solution consiste à utiliser .animate() et CSS approprié.

par exemple.

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