jQueryスライダー効果のコードの書き方

2年 ago
綾乃, 一希
1 minute

jQueryのスライドエフェクトを実現するには、slideUp()メソッドとslideDown()メソッドを使用して上滑りと下滑り効果を、slideToggle()メソッドを使用してスライドトグル効果を実現します。以下にサンプルコードを示します。

  1. スワイプ動作
$(selector).slideUp(speed, callback);

Selector は、スライディング効果を適用する要素のセレクタです。speed はスライディング速度で、ミリ秒単位または「fast」、「slow」を指定できます。callback はスライディング完了後のコールバック関数です (オプション)。

  1. 下落効果：
$(selector).slideDown(speed, callback);

パラメータと使用法は上スワイプエフェクトと同じです。

  1. スライディング効果を変更する
$(selector).slideToggle(speed, callback);

パラメータと使い方は上スワイプ効果と同じ

クリックすると

要素のスライド効果を実行する、完全なサンプルコードを以下に示します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: lightblue;
display: none;
}
</style>
</head>
<body>
<button id="toggleBtn">切换滑动效果</button>
<div id="myDiv"></div>
<script>
$(document).ready(function(){
$("#toggleBtn").click(function(){
$("#myDiv").slideToggle("slow");
});
});
</script>
</body>
</html>

上記コードでは、「スライド効果を変更」ボタンをクリックすると、

要素がslow速度でスライドしてから表示と非表示を切り替えます。

bannerAds