Scale Effect
パーセントを指定して要素の拡大縮小を行います。
scale
| 引数 | 説明 |
|---|---|
| direction |
初期値： エフェクトが作用する方向を指定します。 指定可能な値は、"both", "vertical", "horizontal"です。 |
| origin |
初期値： 要素が非表示になる場所(地点)を指定します。 |
| percent |
型： 拡大・縮小の比率をパーセントで指定します。 |
| scale |
初期値： "both", "box", "content"の要素のどの領域をリサイズするのかを指定します。 "box"は要素のborderとpaddingを、"content"は要素内の内容を、"both"はその両方をリサイズします。 |
サンプル
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>scale demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
p {margin-top:0; margin-bottom:2px; font-size:14px;}
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<p>どこかをクリックしてエフェクトを確認してください。</p>
<div id="toggle">aaaaaaaa</div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "scale" );
});
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>scale demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
p {margin-top:0; margin-bottom:2px; font-size:14px;}
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<p>どこかをクリックしてエフェクトを確認してください。</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle({ effect: "scale", direction: "horizontal" });
});
</script>
</body>
</html>
© 2010 - 2017 STUDIO KINGDOM