非表示の div がいくつかあり、ボタンをクリックすると div が表示されます。
私は見ましslideDown
たが、それはまさに私が望むものではありません。非表示の div を何もない状態から元のサイズに拡大し、(非表示の) div の右上隅からこれを行うことを望みます。
非表示の div がいくつかあり、ボタンをクリックすると div が表示されます。
私は見ましslideDown
たが、それはまさに私が望むものではありません。非表示の div を何もない状態から元のサイズに拡大し、(非表示の) div の右上隅からこれを行うことを望みます。
$("#box").show('size', { origin: ["top", "right"] }, 2000);
.toggle()
同じイベントで非表示にしたい場合は、代わりに同じパラメーターを使用してください。
最初のパラメーターは、使用しているエフェクトですsize
。2 番目のパラメーターは、この効果に固有のオプションのオブジェクトであり、origin
サイズ変更元の場所を指定するためにのみ使用します。3 番目のパラメーターはミリ秒単位の期間で、自由に変更できます。
何もない状態から元のサイズに成長し、(非表示の) 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');
});
});
これは完全にあなたが望むものではありませんが、おそらく変更することができます:
.effect
パラメーターを使用して、ダイビングでjQuery UI メソッドを使用でき"size"
ます。これはオプションでカスタマイズ可能であり、ここで方法を理解できるはずです。
頑張ってください。これがお役に立てば幸いです。
これを試してください
<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>
これが役立つことを願っています。