Jquery .get(), video control (학습 61일차 TIL)

210908 오늘은 예제를 통해 제이쿼리 get()메서드와 동영상을 컨트롤하는 방법을 학습했다.

Must Remember

• .get()은 DOM element를 반환한다.

$("article").on("mouseenter",function(){
  var vid = $(this).find("video").get(0);
  console.log(vid);
  vid.currentTime=0; //동영상의 재생 위치를 처음(0)으로 설정
  vid.play();
  $(this).stop().animate({"width":"35%"}, 1000, function() {
    $(this).find("h3").stop().animate({"right":"10px"},400);
    $(this).find("p").stop().animate({"right":"10px"},800);
  });
  $(this).find("video").stop().animate({"opacity":"0.9"},1200);
});

$("article").on("mouseleave",function(){
  var vid = $(this).find("video").get(0);
  vid.pause();
  $(this).stop().animate({"width":"12%"},700);
  $(this).find("video").stop().animate({"opacity":"0"},1500);
  $(this).find("h3").stop().animate({"right":"-310px"},200);
  $(this).find("p").stop().animate({"right":"-310px"},500);
});