Question

是否可以在jQuery中为.attr函数设置动画？我有一个iframe，可以根据点击更改视频的宽度和高度。我必须使用.attr来更改iframe的宽度和高度，因为我有css代码使iframe响应屏幕的浏览器。

<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

您可以通过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'
});

或者只是将一个类切换为一个新类，并让样式表为您完成所有事情。

Answer 2

我认为不是使用HELLO world HOW are you?尝试更改iframe的类，

$（ “＃视频帘布层”）addClass（ “动画”）;

然后在你的css文件上，

创建一个名为.attr

的类

.animate

可以.attr动画？

2 个答案: