메서드(이펙트)
파라미터로 속도를 지정할 수 있다.
params: 'fast', 'slow', 숫자(밀리초)
아무것도 넣지 않으면 기본값이 적용된다.
$('.menu li').mouseenter(function(){
$(this).children('.sub-menu').stop().slideDown()
})
$('.menu li').mouseleave(function(){
$(this).children('.sub-menu').stop().slideUp()
})
메서드(클래스 제어)
요소 기존 스타일을 자식 선택자로 사용했다면
그 선택자를 따라 스타일을 만들어야한다.
css
.container div{
background-color: dodgerblue;
width: 250px;
height: 300px;
margin-top: 10px;
text-align: center;
line-height: 300px;
color: white;
/* display: none; */
}
.container div.active{
background-color: red;
}
/* 동작 안함
.active{
background-color: red;
}
*/
custom.js
$('.add-btn').click(function(){
$('.container div').addClass('active')
})
$('.remove-btn').click(function(){
$('.container div').removeClass('active')
})
$('.toggle-btn').click(function(){
$('.container div').toggleClass('active')
})
메서드(요소 탐색)
메서드(속성 탐색)
this
이벤트가 일어난 요소
$('.btn span').click(function(){
$(this).addClass('active')
$(this).siblings().removeClass('active')
})