jQuery.effet slideRight

J'ai besoin pour 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 ça ne semble pas être ce que je cherche...

24
demandé sur Webnet 2010-11-20 00:14:22

2 réponses

Si vous souhaitez inclure la bibliothèquejQuery UI , en plus de jQuery elle-même, vous pouvez simplement utiliser hide(), avec des arguments supplémentaires , comme suit:

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

            });
    });

JS Fiddle démo.


Sans utiliser L'interface utilisateur jQuery, 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 L'interface utilisateur jQuery, je vous recommande de créer un lien vers le code hébergé par Google, à: https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js

48
répondu David Thomas 2010-11-19 21:28:56

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

Par exemple

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

Js Fiddle

14
répondu charisis 2010-11-19 21:26:10