본문 바로가기

Javascript

제이쿼리 css 추가 하기 & animate 넣기

문제 


화면을 보였다가 없었다가 하게 만들기

 

해결


	$('#menu-btn').on('click',()=>{

			$('#hi').animate({marginLeft:'0px'},[5000])

		})

 

	$('#btn').on('click',()=>{
			$('.alerm-box').toggle()
			$('.jumbotron-box').css('opacity','0.5')
		})

문제


과연 자바스크립트에서 css를 만들고 없애는 것이 효울적인가?

 

해결


자바스크립트에서 css를 짜는 것 보다 첫 화면 마지막 화면을 미리 짜고 동작을 컨트롤 하는 것이 서로의 역할을 독립적으로 바꾸기 때문에 좋다. 

 

 

1.먼저 css에 속성과 속성이 나오는 속도를 정하자 transition 

2. transition 으로 시간대 조절

3. transform  

4.js에서 이벤트가 일어났을 때 속성이 있었다가(transform: translate -1000px) class ="slide dow" 추가하여 그 안의 내용인(transform: translate 0px) 으로 변경