問題
要素を横にスライド表示するには？
解決策
jQuery UIを読み込んだ上で「$("要素のセレクタ").show("slide", {direction: "向き"}, 速度（1秒=1000）)」で要素を指定することで、要素を横にスライド表示することができます。
要素を横にスライド表示する
要素を横にスライド表示する方法として、jQuery UIを使って実現する方法があります。
jQuery UIで横にスライド表示する方法をご紹介します。
DEMOはこちら
CDNを利用して、jQuery UIを読み込みます。
CDNを利用して、jQuery UIを読み込みます。
<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
...
</head>HTML
横スライドさせる要素とそれをコントロールする要素を用意します。
<div class="sideslide-box">
<div class="label">
<p class="text">スイッチ</p>
</div>
<div class="text-box">
<p class="text">テキスト</p>
<p class="text">テキスト</p>
</div>
</div>CSS
.sideslide-box{
display: table;
}
.sideslide-box .label{
display: table-cell;
vertical-align: middle;
width: 60px;
padding: 10px;
background-color: #fef5f2;
border-right: 1px solid #ffffff;
}
.sideslide-box .text-box{
display: table-cell;
vertical-align: middle;
padding: 10px;
background-color: #fef5f2;
}javascript
jQuery UIを読み込んだ上で「$(“要素のセレクタ”).show(“slide”, {direction: “向き”}, 速度（1秒=1000）)」で要素を指定することで、要素を横にスライド表示することができます。
$(".sideslide-box .text-box").hide("slide", {direction: "left"}, 0);
$(".sideslide-box .label").click(function(event){
event.preventDefault();
if( $(this).hasClass('open') ){
$(this).closest('.sideslide-box').find('.text-box').hide("slide", {direction: "left"}, 100);
}else{
$(this).closest('.sideslide-box').find('.text-box').show("slide", {direction: "left"}, 100);
}
$(this).toggleClass('open');
});参照
【[jQuery]jQueryUIで横方向にスライド（上下左右自由自在）】
https://happyquality.com/2012/04/06/2060.htm
コメント