web-dev-qa-db-ja.com

jQuery .slideRightエフェクト

画面の右側にdivタグをスライドさせる必要がありますが、jQueryでこの効果を得るにはどうすればよいですか？私はここを探していました： http://api.jquery.com/category/effects/sliding/ そしてそれは私が探しているものではないようです...

jquerysliding
24
Webnet

JQuery自体に加えて jQuery UI ライブラリを含めることを希望する場合は、 hide()、追加の引数 を使用できます。次のとおりです。

_$(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

48
David Thomas

別の解決策は、.animate（）と適切なCSSを使用することです。

例えば.

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

JSフィドル

14
charisis