アニメーションによる削除ボタンの表示について
解決したいこと
隣の要素が横に少しスライドすると同時に、非表示の要素を表示。
jQueryのanimate()を使って、矢印をクリックすると削除ボタンが表示されるよう
したいのですが、横方向のoverflow-xが効かず、縦方向にoverflowされ、
下にズレて表示されます。原因がわからず困っています。
該当するソースコード
ソースコードを入力
```<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet"
href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
</head>
<div>
<ul>
<li class="show"><button>go</button></li>
<li class="list1">隠している</li>
<li class="list2">こんにちわ</li>
</ul>
</div>
<style>
ul{
padding:0;
overflow-x: auto;
width:400px;
height:25px;
}
ul li{
display: inline-block;
}
.list1{
width:300px;
background-color: green;
color:white;
}
.list2{
width:300px;
background-color: red;
color:white;
display:none;
}
.go {
width:30px;
}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(function(){
$("button").on("click",function(){
$(".list2").animate({
"width":"toggle",
"height":['toggle','swing'],
});
$("ul").animate({
"scrollLeft":"300px"
},500);
});
});
</script>
</html>
0 likes
