ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryを使って左右スライドのトグルメソッドを実装するにはどうすればよいですか？
jQueryを使って左右スライドのトグルメソッドを実装するにはどうすればよいですか？
- 亚连オリジナル
- 2018-06-01 16:12:192078ブラウズ
ここで、左右のスライドを実現するための jQuery の切り替えメソッドを共有します。これは優れた参考値なので、皆さんのお役に立てれば幸いです。
上下に移動するには jQuery が使用されることがわかっており、slideUp() メソッドと slideDown() メソッドを直接使用できます。
slideUp() メソッドと slideDown() メソッドは要素の高さのみを変更します。要素の表示属性値が「none」の場合、slideDown()メソッドを呼び出すと、要素は上から下に向かって表示されます。 slideUp() メソッドはその逆で、要素は上から下に短縮されて非表示になります。
コードは次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>toggle-jquery1.9</title>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<style>
p.container {
height: 320px;
border: 1px solid #ccc;
}
p.left {
width: 200px;
height: 300px;
background-color: #36f;
}
</style>
</head>
<body>
<p class="container">
<p class="left"></p>
</p>
<button id="toggle">toggle</button>
<script>
$(document).ready(function(){
$('#toggle').click(function(){
$('.left').slideToggle(300);
});
});
</script>
</body>
</html>
それでは、左右にスライドインおよびスライドアウトするのはどうですか?
デモは次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>toggle-jquery1.9</title>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<style>
p.container {
height: 320px;
border: 1px solid #ccc;
}
p.left {
width: 200px;
height: 300px;
background-color: #36f;
}
</style>
</head>
<body>
<p class="container">
<p class="left"></p>
</p>
<button id="toggle">toggle</button>
<script>
$(document).ready(function(){
$('#toggle').click(function(){
$('.left').animate({width:'toggle'},350);
});
});
</script>
</body>
</html>
効果は次のとおりです:
上記は、すべての人にとって役立つことを願っています。未来。
関連記事:
vue.jsプロジェクトnginxデプロイメントチュートリアル
JSを介してページにスクロールバーがあるかどうかを確認する方法
以上がjQueryを使って左右スライドのトグルメソッドを実装するにはどうすればよいですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。