728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
#container ul li{
border: 1px solid black;
position: relative;
left:100px;
top:100px;
padding: 10px;
width:80px;
height: 80px;
background:#00ff00;
color:#ffffff;
cursor:pointer;
overflow: hidden;
}
.top{
position:absolute;
left:0px;
top:0px;
padding: 10px;
width:80px;
height: 80px;
background:#000000;
color:#00ff00;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
$("#container>ul>li").hover(
function(){
$(this).find('.top').stop().animate({
left:"-100px",
top:"-100px"
})
},function(){
$(this).find('.top').stop().animate({
left:"0px",
top:"0px"
})
}
)
})
</script>
</head>
<body>
<div id="container">
<ul>
<li>
bottom
<div class="top">top</div>
</li>
<li>
bottom
<div class="top">top</div>
</li>
<li>
bottom
<div class="top">top</div>
</li>
<li>
bottom
<div class="top">top</div>
</li>
<li>
bottom
<div class="top">top</div>
</li>
<li>
bottom
<div class="top">top</div>
</li>
</ul>
</div>
</body>
</html>.stop()
현재 동작하고 있는 애니메이션 중단시 동작이 즉시 중단
.animate()
애니메이션 효과를 만듭니다.
728x90
'STUDY > jQuery' 카테고리의 다른 글
| [jQuery] innerHTML innerText기능 사용하기 .html() .text() (0) | 2022.12.28 |
|---|---|
| [EasyUI] DataGrid / Layout / Link Button / Massager (0) | 2022.12.21 |
| [jQuery] 자주 사용되는 메서드 ready·on·prop·attr (0) | 2022.10.05 |
| [jQuery] AJAX 설명과 기본 사용 방법 정리 (0) | 2022.09.30 |
| [jQuery] jQuery 정의와 적용 방법 정리 (1) | 2022.09.30 |