「jQuery」animateメソッドで要素を横に移動させるサンプル
環境
Google Chrome 104.0.5112.80
Windows 10 Home 64bit
jQuery 3.6.0
Google Chrome 104.0.5112.80
Windows 10 Home 64bit
jQuery 3.6.0
Google Chrome 104.0.5112.80 Windows 10 Home 64bit jQuery 3.6.0
構文
.animate( properties [, duration ] [, easing ] [, complete ] )
アニメーションの動きを追加できます。
書式
$(“#div要素セレクタID").animate({
marginLeft:’数値’
});
animateメソッドで要素を横に移動させます。
使用例
<!DOCTYPE html>
<html>
<body>
<style>
#cft{
height:30px;
width:30px;
background-color:skyblue;
}
</style>
<p><input type="button" id="btnShow" value="表示"></p>
<div id="cft"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#btnShow").click(function() {
$("#cft").animate({
marginLeft:'120px'
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<style>
#cft{
height:30px;
width:30px;
background-color:skyblue;
}
</style>
<p><input type="button" id="btnShow" value="表示"></p>
<div id="cft"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#btnShow").click(function() {
$("#cft").animate({
marginLeft:'120px'
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<style>
#cft{
height:30px;
width:30px;
background-color:skyblue;
}
</style>
<p><input type="button" id="btnShow" value="表示"></p>
<div id="cft"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#btnShow").click(function() {
$("#cft").animate({
marginLeft:'120px'
});
});
</script>
</body>
</html>
結果
「表示」ボタンを押すとdiv要素cftが右に移動します。