jQuery .slideRight效果 [英] jQuery .slideRight effect

问题描述

我需要一个div标签在屏幕右侧滑出，如何使用jQuery获得这种效果?我一直在这里查看: http://api.jquery.com/category/effects/sliding /，这似乎并不是我想要的...

I need for a div tag to slide out on the right side of the screen, how do I get this effect with jQuery? I've been looking here: http://api.jquery.com/category/effects/sliding/ and it doesn't seem to be what I'm looking for...

推荐答案

如果您还愿意包含 jQuery UI 库，到jQuery本身，那么您可以简单地使用 hide()和其他参数，如下所示:

If you're willing to include the jQuery UI library, in addition to jQuery itself, then you can simply use hide(), with additional arguments, as follows:

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

            });
    });

JS小提琴演示.

不使用jQuery UI，只需使用 animate()

Without using jQuery UI, you could achieve your aim just using 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演示

如果您确实选择使用jQuery UI，则建议您链接到Google托管的代码，网址为:

If you do choose to use jQuery UI, then I'd recommend linking to the Google-hosted code, at: https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js

这篇关于jQuery .slideRight效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！