.attrはアニメーションできますか？

Question

.attr関数をjQueryでアニメーション化することはできますか？私はクリックに基づいてビデオの幅と高さを変更するiframeを持っています。私は.attrを使用して、iframeの幅と高さを変更する必要があります。これは、iframeを画面のブラウザに応答させるCSSコードがあるためです。

<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：

$("#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

あなただけのCSSを経由してトランジションを適用することができます。必要な場合は、個別に各属性の速度、遅延やトランジションの種類を制御することができます

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' 
}); 

または、クラスを新しいクラスに切り替えるだけですスタイルシートを持って、あなたのためにすべてを行います。