2022_01_02 javascript animate, click, fadein, fadeout, css

• .click - 객체 클릭시 이벤트 발생
• .fadeIn - 객체가 나타나는 것
• .fadeOut - 객체가 사라지는 것
• .css - 변경하고픈 css 변경
• animate( properties , [duration], [easing], [complete])
• 애니메이션 변경

 

• 필수사항
• properties -> css사항이 어떻게 변경될지 정하는것

 

$("#clickme").click(function() {
	$("#book").animate({
    	opacity: 0.25,
        left: "+=50",
        height: "toggle"
    }, 5000, function(){
    
    });
});

 

• jQuery 사용법
• script jquery를 가지고와서 사용

 

$('#drone').click(functuon(){
	$('#spit').fadeIn();
    $('#spit').animate({left: '+=250'});
    $('#spit').fadeOut();
    $('#spit').css({left: '150'});
});

 

html 코드를 건드는 방법

var hp = 3;
$('#drone').click(functuon(){
	$('#spit').fadeIn();
    $('#spit').animate({left: '+=250'});
    $('#spit').fadeOut(function(){
    	hp -= 1;
  		$('#hp).text('HP :' +hp);
        if(hp == 0){
                    $('#bunker').fadeOut();
                }
    });
    $('#spit').css({left: '150'});
    
});

• hp 가 바로 감소 되기때문에 천천히 감소시켜야한다
• 콜백함수를 쓴다 -> 실행 함수 동작이 모두 종료되고나서 실행