4

非表示の div がいくつかあり、ボタンをクリックすると div が表示されます。

私は見ましslideDownたが、それはまさに私が望むものではありません。非表示の div を何もない状態から元のサイズに拡大し、(非表示の) div の右上隅からこれを行うことを望みます。

4

5 に答える 5

9
$("#box").show('size', { origin: ["top", "right"] }, 2000);

.toggle()同じイベントで非表示にしたい場合は、代わりに同じパラメーターを使用してください。

最初のパラメーターは、使用しているエフェクトですsize。2 番目のパラメーターは、この効果に固有のオプションのオブジェクトであり、originサイズ変更元の場所を指定するためにのみ使用します。3 番目のパラメーターはミリ秒単位の期間で、自由に変更できます。

実際の例: http://jsbin.com/uwonun/1

于 2013-05-24T09:12:07.440 に答える
1

何もない状態から元のサイズに成長し、(非表示の) div の右上隅からこれを行います。

私はトグルがあなたが必要とすることをすると思います...

これを試して

html

<div id="test"></div>
<button id="button">click</button>

jquery

$(function(){
  $("#button").click(function(){
      $('#test').toggle('slow');
});
});

2回目のクリックでアニメーションが必要ない場合は、使用できますone()

$(function(){
  $("#button").one('click',function(){
      $('#test').toggle('slow');
});
});

ここでフィドル

于 2013-05-24T09:16:43.977 に答える
0

これは完全にあなたが望むものではありませんが、おそらく変更することができます:

.effectパラメーターを使用して、ダイビングでjQuery UI メソッドを使用でき"size"ます。これはオプションでカスタマイズ可能であり、ここで方法を理解できるはずです。

http://jqueryui.com/effect/

頑張ってください。これがお役に立てば幸いです。

于 2013-05-24T09:08:32.113 に答える
0

これを試してください

    <html>
    <head>
        <style type="text/css">
            #slideDiv{display:none;width:400px;height:300px;position:absolute;top:0;right:0;background:#ff0000;color:#fff;}
        </style>
    </head>
    <body>
        <div id="slideDiv"> </div>
        <button id="startSlide">Start Slide</button>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                $('#startSlide').on('click', function(){
                    $('#slideDiv').toggle('slow', function() { });
                })
            })
        </script>
    </body>
</html>

これが役立つことを願っています。

于 2013-05-24T09:11:56.860 に答える