- detach() : 요소를 뗀다(속성과 이벤트 정보를 유지)
- 요소를 떼기만하면 제거랑 같은기능(remove)
- 보통은 요소를 떼서 다른 곳에 붙일 때 사용
- is('') : ~인지 아닌지 확인하여 ~이면 true, 아니면 false 반환
- :animated, : checked, :eq(1) 을 보통 함께 사용해서 같이쓰는 것들의 상태를 확인
- 마우스를 요소 위에 댔을 때와 벗어났을 때 같은 함수를 실행
hover(function(){ })
- 마우스를 요소 위에 댔을 때와 벗어났을 때 다른 함수를 실행
hover(function(){ //마우스를 요소 위에 댔을 때
}, function(){ }) //마우스가 요소 위에서 벗어났을 때
- removeAttr('속성명'): 해당 속성값을 삭제
- removeProp('속성명'): 해당 속성값을 삭제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>detach 예제</title>
<script src="../JS/jquery.min.js"></script>
<script>
var id;
$(function(){
id= startInterval();
$('ul').hover(function(){
clearInterval(id);
},function(){
id= startInterval();
})
})
function startInterval(){
var id =
setInterval(function(){ //setInterval은 id값을 반환
if(!$('ul li').first().is(':animated')){
$('ul li').first().animate({'margin-top':'-50px'},1000, function(){
$(this).detach().appendTo('ul').removeAttr('style','');
})
}
},1500);
return id;
}
</script>
<style>
ul{
list-style: none; padding: 0; margin: 0; height: 50px; overflow: hidden;
text-align: center; background: cornflowerblue;
}
li{
height: 50px; line-height: 50px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>