.attr을 애니메이션으로 재생할 수 있습니까?

Question

.attr jQuery에서 애니메이션 기능을 사용할 수 있습니까? 클릭을 기준으로 동영상의 너비와 높이를 변경하는 iframe이 있습니다. 화면의 브라우저에 응답하는 iframe을 만드는 CSS 코드가 있기 때문에 .attr 너비와 높이를 변경하려면 사용해야합니다.

<iframe id="video-ply" src="<?php echo get_post_meta(get_the_ID(), 'video_embed_url', true) ;?>" frameborder="0" allowfullscreen="true" scrolling="no" width="615" height="346"></iframe> 

jQuery를 : 당신은 그냥 CSS를 통해 전환을 적용 할 수 있습니다

$("#video-ply").attr('width', '889px'); 
$("#video-ply").attr('height', '500px'); 

Answer 1

내가 대신 iframe 대응의 클래스를 변경 .attr 시도를 사용하여 생각,

$ ("# 비디오 플라이") addClass는 ("애니메이션."); CSS 파일에 다음

,

것이라는 이름의 클래스를 생성 .animate

.animate{ 
    width: value; 
    height: value; 
    /* css transition effects here */ 
} 

Answer 2

.

JS Fiddle

#video-ply { 
    transition: 1s; 
} 

필요한 경우는 개별적으로 각 속성의 속도, 지연 및 전환 유형을 제어 할 수 있습니다

:

은 높이/폭을 변경하는 경우 그런 다음, 당신이 대신 즉시의 원하는 속도로 전환됩니다

JS Fiddle

#video-ply { 
    transition: height 2s .4s ease, width .5s 1s ease; 
} 

---

또한

, 당신은 사용할 수 있습니다 jQuery의 .height() 대신 .attr()를 사용 .width()뿐만 아니라 그들을 체인 :

JS Fiddle

$("#video-ply").height('200px').width('200px'); 

또는 .css() 사용

JS Fiddle

$("#video-ply").css({ 
    'height': '200px', 
    'width': '200px' 
}); 

또는 클래스를 새로운 클래스로 토글합니다. 스타일 시트를 가지고 모든 것을 할 수 있습니다.