可以動畫嗎？

是否有可能在jQuery中動畫.attr函數？我有一個基於點擊改變視頻寬度和高度的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');

來源

2017-10-19 Gregory Schultz

我想，而不是使用.attr嘗試改變班級的iframe的，

$（「＃視頻層」）addClass（「動畫」）。

然後在你的CSS文件，

創建一個名爲類.animate

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

來源

2017-10-19 03:58:27 apelidoko

你可以只通過CSS應用的過渡。然後，當它改變高度/寬度，將在轉速過渡你想要的，而不是瞬間：

JS Fiddle

#video-ply { 
    transition: 1s; 
}

如果需要，您也可以單獨控制每個屬性的速度，延遲和過渡類型：

JS Fiddle

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

此外，你可以使用jQuery的.height()和.width()而不是使用.attr()並把它們連，以及：

JS Fiddle

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

或者使用.css()：

JS Fiddle

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

或者直接切換一個新的課程類，並有一個樣式表爲你做一切。

來源

2017-10-19 03:54:53

可以動畫嗎？

回答

相關問題