[JQuery] 효과와 애니메이션 (효과 이펙트 명령어, event 정리)

이펙트 명령어:

 

$(선택자).이펙트명령어(❶시간, ‘❷easing’,❸콜백 함수function(){실행문;}); 

❶시간 :

1. 키워드값 (밀리초) : slow, normal, fast 

2. 밀리언초: 1초 1,000으로 계산

 

❷ easing:  

가속도를 설정한다. 필요가 없는 경우는 생략할 수 있다.

키워드값: linear(일정 속도로 유지), swing(조금씩 빨라 졌다 느리게 끝냄) 

fadeTo(시간,opacity,'easing',function(){})

 

❸ 콜백 함수는 이펙트가 끝난 후에 실행할 실행문을 설정한다.

필요가 없는 경우는 생략할 수 있다. 익명의 함수로 설정해야 한다.

보이기	show()	slideDown()	fadeIn()	display:block
안보이기	hide()	slideUp()	fadeOut()	display:none
토글	toggle	slideToggle	fadeToggle()
기타			fadeTo()

toggle()	show()와 hide() 자동 반복한다.
slideDown()	요소가 아래로 시간에 맞추어서 나타나게 한다.
slideUp()	요소가 위로 시간에 맞추어서 안 보이게 한다.
slideToggle()	sildeDown()과 slideUp()을 자동 반복한다.
fadeIn()	숨겨진 요소가 점점 투명도가 올라가면서 선명해 진다.
fadeOut()	요소가 점점 투명해지면서 숨겨진다.
fadeTp()	요소가 지정한 투명도가 적용된다.
fadeToggle()	fadeIn()와 fadeOut()를 자동 반복

show()	요소를 시간에 맞추어서 나타나게 한다.
hide()	요소를 시간에 맞추어서 안 보이게 한다.

콜백함수 사용

        $('.btn02').click(function(e){
            $('.back02').slideDown(500,function(){
                $('.back02').css('background-color' ,'yellow')
            });
        })

 

.animate :

 

$(‘선택자’).animate({❶속성명: ‘값’,속성명:‘값’},❷소요시간,‘❸가속도’,❹콜백함수); 

color 군단은 플러그인이 필요하다.

 

마우스 이벤트

$(선택자).click()	선택자에 마우스 포인터가 눌렀다 떼었을 때
$(선택자).dblclick()	선택자를 더블 클릭하였을 때
$(선택자).mousedown()	선택자에 마우스 버튼을 눌렀을 때
$(선택자).mouseup()	선택자에 마우스 버튼을 떼었을 때
$(선택자).mouseenter()	선택자에 마우스가 진입했을 때
$(선택자).mouseleave()	선택자에 마우스가 벗어났을 때
$(선택자).hover()	mouseenter()와mouseleave()를 같이 사용(설정)할 때 형식:  hover(function(){mouseenter할 일},function(){mouseleave할일});
$(선택자).move()	마우스커서가 해당 선택자 위에서 움직일 때 실행된다.

 

$( :not(:animate)) 선택자 사용하여 광클릭 문제 해결하기 

 

이펙트 명령어를 사용할 때 광클릭과 같이 이벤트가 여러 번 작동 시킬 수 있습니다.

이럴 경우 에는 이벤트의 작동 수 만큼 이펙트도 계속 작동되어 문제가 발생됩니다.

이러한 광클릭을 막아 주는 방법 선택작로 해결하는 방법

형식: 

$(‘선택자:❶not(❷:animated)).이펙트 명령어( ) 

 

스타일을 도움 받고 싶다면 활용할만한 사이트

jQuery UI

animate 사용방식

	$(function(){
		$('#btn').click(function(){
			$('p').animate({left:'300px'},700)
		})
		$('#btn01').click(function(){
			$('p').animate({left:'+=100px'},700)
		})
		$('#btn02').click(function(){
			$('p').animate({backgroundColor:'pink'},700)
		})
	})

변수를 사용해서 박스 옮기기

<div>
	<ul>
		<li  id="flower"><img src="img/flower.jpg" alt="flower"></li>
		<li  id="building"><img src="img/building.jpg" alt="building"></li>
	</ul>
</div>
<script>
	$(function(){
		const liWidth = $('ul>li').css('width'); //string형
		const numWidth = $('ul>li').width(); //number형
		
		$('#flower').click(function(e){
			$('ul').animate({marginLeft:'-'+numWidth+'px'},500)
			$('ul').animate({marginLeft:'-='+numWidth+'px'},500)
		})
		$('#building').click(function(e){
			$('ul').animate({marginLeft:'0px'},500)
			$('ul').animate({marginLeft:'+='+numWidth+'px'},500)
		})
	})

이벤트 명령어

$(선택자). 이벤트명령어(function(e){ 실행문 ;}) ; ❶ 

기본형

$(선택자). on(‘이벤트명령어’,function(e){실행문 ;}) ❷ 

on( )	이벤트타입과 이벤트 핸들러를 설정할 수 있다.
one( )	one(“이벤트 타입”,function(){    }) 이벤트 발생을 한 번만 실행한다.

    $(function(){
        $('button').one('click',function(){
            console.log('click')
        })
    })

  $(function(){
    $('p').on('click',function(){
      console.log('click')
    })
    $('p').off('click')
  })

라이브이벤트

$('영역').on('이벤트','선택자',function(){})

        $('ul').on('click','li>a',function(){
            const str = $(this).attr('href');
            $('p>img').attr('src',str)
            return false;
        })

        $('button').on('click',function(){
            $('ul').append('<li><a href="./img/building.jpg">빌딩</a></li>')
        })
    })

 

이벤트 삭제하기 

off()

이벤트를 삭제하기

<div id="content">
<div id="menu">

<div  class="page">
<ul>
<li><a href="img/img_01.jpg"><img src="img/img_01.jpg" width="140" height="105" ></a></li>
<li><a href="img/img_02.jpg"><img src="img/img_02.jpg" width="140" height="105" ></a></li>
<li><a href="img/img_03.jpg"><img src="img/img_03.jpg" width="140" height="105" ></a></li>
<li><a href="img/img_10.jpg"><img src="img/img_10.jpg" width="140" height="105" ></a></li>
<li><a href="img/img_05.jpg"><img src="img/img_05.jpg" width="140" height="105" ></a></li>
<li><a href="img/img_06.jpg"><img src="img/img_06.jpg" width="140" height="105" ></a></li>
</ul>  
</div>

<p><img src="img/prev.png" class="prev">
<img src="img/next.png" class="next" /></p>
</div>
<!--추가분-->
<div id="main">
    <img src="./img/img_01.jpg" alt="상세이미지">
</div>

<script>
    $(function(){
        $('li>a').on('click',function(){
            const str = $(this).attr('href')
            const source = '<img src ="'+str+'" alt ="상세이미지">'
            $('#main').prepend(source);
            $('#main>img:last').fadeOut(300,function(){
                $('#main>img:not(:eq(0))').remove();
            });
            return false;
            
        })
    })