jQuery .slideRight效果

前端之家收集整理的这篇文章主要介绍了jQuery .slideRight效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要一个div标签在屏幕的右侧滑出,我如何使用jQuery获得这个效果?我一直在寻找: http://api.jquery.com/category/effects/sliding/,它似乎不是我正在寻找…

解决方法

如果您愿意包含 jQuery UI库,除了jQuery本身,那么您可以简单地使用 hide(),with additional arguments,如下所示:
$(document).ready(
    function(){
        $('#slider').click(
            function(){
                $(this).hide('slide',{direction:'right'},1000);

            });
    });

JS Fiddle demo

不使用jQuery UI,您可以使用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

如果您确实选择使用jQuery UI,那么建议您连接到Google托管的代码https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js

猜你在找的jQuery相关文章