jQuery .slideRight效果

Question

我需要在屏幕右侧滑出div标签,如何使用jQuery获得此效果？我一直在这里看:http://api.jquery.com/category/effects/sliding/它似乎不是我正在寻找的......

Answer 1

如果您愿意包含jQuery UI库,除了jQuery本身,那么您可以使用hide()其他参数,如下所示:

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

            });
    });

JS小提琴演示.

不使用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小提琴演示

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

Answer 2

另一个解决方案是使用.animate()和适当的CSS.

例如

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

JS小提琴