how to expand video using javascript command

StackOverflow https://stackoverflow.com/questions/23453215

题

im pretty new to javascript and havent had html done in awhile.. so basically i need to create this animation on web page that the video expands and starts playing only when the mouse hovers over it and it is also link to another page. My button onMouseOver doesnt seem to trigger the event, can someone give me the code pls

<head>
<style type="text/css">
div#box1 {


}
</style>

<script>

function slideopen(el){
var elem = document.getElementById(el);
elem.style.transition = "height 1s"
elem.style.width = "320px"; 
}



</script>
</head>
<body>
<button onMouseOver="slideopen('box1')"></button>

<div id="box1">

<video width="300" height="600">
<source src="africafinal.mp4"  type="video/mp4">

</div>


 </body>
有帮助吗？

解决方案

You need to define the starting height and the target height. Currently, you don't tell the browser what the target height shall be, just that there is a transition. That won't work.

其他提示

Your function sets a transition on height, then changes the width. I don't think that's what you meant to do.

In your style block, set the height to 0 and set your transition speed. In your function, just set the new height. That should fix it.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top