728x90
$('h1,h3').next().hide();
h1태그와 h3 태그 다음 형제 노드인 div 태그를 숨긴다.
$('h1,h3').click(function(e){
//$(e.target).next().toggle(500);
$(e.target).next().fadeToggle(1000);
});
클릭하면 div가 fadeToggle 천천히 생성된다.
h1을 클릭했기 때문에 h1의 div의 자식인 h3가 생성되고 h3를 다시 클릭하면 h3의 div가 생성된다.
$('#logo').click(function(){
$('#logo').animate({width:'50%',heigth:'50%'},2000);
$('#logo').animate({width:'10%',heigth:'10%'},1900);
$('#logo').animate({width:'300%',heigth:'300%'},400);
$('#logo').animate({width:'100%',heigth:'100%'},400);
});
.animate()
animate는 properties를 받는데 properties는 object이다.
>>
.animate({
property:value,
property:value
},duration, complete(){...})
$(function () {
// animate() 메서드를 사용합니다.
$('div').animate({ left: '+=60' }, 2000);
$('div').animate({ width: '+=60' }, 2000);
$('div').animate({ height: '+=60' }, 2000);
// 3초 후에 함수를 실행합니다.
setTimeout(function () {
// 애니메이션 큐를 제거합니다.
$('div').clearQueue();
// 효과 메서드를 사용합니다.
$('div').hide();
}, 3000);
});
setTimeout(실행할 함수, 시간 설정)
clearQueue() 애니메이션 큐를 제거 (진행중인 애니메이션이 있다면 정지되고 큐도 제거된다.)
delay(ms).animate() ms초 후 실행
$('.circle').approach({
opacity: 0.2
}, 200);
접근할때 투명도 변경
$(document).ready(function () {
$('div').hover(function () {
$(this).addClass('reverse', 1000);
}, function () {
$(this).removeClass('reverse', 1000);
});
});
마우스가 위에 올라오면 .addClass('reverse',1000); 'reverse'클래스를 생성해주고
'reverse'클래스가 생성되면 style에 설정된 코드에 따라 색상이 바뀌고 removeClass 함수가 실행되면 사라지면서 원래색상으로 돌아온다.
.reverse {
color:White;
background-color:gray;
}
여기서 hover(function, function) 두개 함수가 인자로 들어갔는데
첫번째 함수는 hover 되었을때 실행되고 두번째함수는 hover out 되었을때 실행되는 함수이다.
'Javascript' 카테고리의 다른 글
| JQuery event (0) | 2023.09.23 |
|---|---|
| Javascript this (0) | 2023.09.23 |
| JQuery 입문 (1) | 2023.09.22 |
| JQuery 이해하기 (0) | 2023.09.22 |
| Javascript defer (0) | 2023.09.21 |
