animate( )

$(선택자).animate(스타일, [ , 지속시간][ , 시간당속도함수][ , 콜백함수]);

이펙트 효과의 시간당속도를 설정

swing : 시작/끝 느리게, 중간에서는 빨라짐

linear : 일정한 속도

$("#img1").animate(
        { width: "100px", opacity: "1" },
        5000,
        "linear",
        function () {
          //콜백함수: 애니메이션 끝난 후 처리
          alert("애니메이션 끝");
          $(this).after("<b>The End</b>");
        }
      );

• 예제문제
• 예제

on( )

처음부터 존재하거나 미래에 생기게 될 요소 모두에 이벤트 적용 가능 on(이벤트종류, 지정자, 구현부)

<aside> 💡 $(id).click(function(){})에서 element가 나중에 생긴 경우에는 click 이벤트 적용 x

이때 on( ) 메서드를 사용 시 적용 o

$(document).on(’click’, id, function)

→ element가 나중에 동적으로 생기게 되더라도 이벤트 적용 o

</aside>

• 예제문제

trigger

이벤트 강제발생

$("h2").click(function () {
	  //별추가
    $(this).append("☆");

    $(this).html(function (i, html) {
      return html + "★";
    });
});

//1초단위로 마지막 h2를 클릭한 효과 주기
setInterval(function () {
    $("h2:last").trigger("click");
}, 1000);