音频控件在mouseover上显示,在mouseout上淡出
Audio controls appear on mouseover and fade away on mouseout
我想做的是使音频控件在页面加载时可见,在5秒钟后淡出,在悬停/鼠标悬停时出现,在鼠标悬停后5秒钟淡出。就像YouTube控制栏的工作原理一样。
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
$(document).ready(function(){
$('#audio-placeholder').hover(
function(){
//runs on mouseover
$('#audio-controls').fadeIn();
},
function(){
//runs on mouseout
hideAudioControls();
}
);
hideAudioControls(); //runs at startup
});
function hideAudioControls(){
setTimeout(function(){
$('#audio-controls').fadeOut();
},3000);
}
div{position:relative;}
.audio-inner{position:absolute;top:0;left:0;}
#audio-controls{background:white;z-index:1;}
#audio-placeholder{width:300px;height:20px;padding-top:10px;text-align:center;z-index:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="audio-container">
<div id="audio-controls" class="audio-inner">
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div id="audio-placeholder" class="audio-inner">
Hover here for controls
</div>
</div>
注:
基本上,有一个盒子(音频容器)包含另外两个盒子。
音频容器框的样式必须为position:relative
,才能使position:absolute
在其他两个框中工作。position-absolute
使两个框一个在另一个的顶部,所以我也用z-index
告诉它哪个框在顶部(z-index:1
),哪个在底部(z-index:0
)注意,你可以为z索引组成任何数字-较大的数字在较低的数字之上
hover()
具有两个函数——第一个函数在mouseover上触发,第二个函数在mouseout上触发。
javascript代码使用jQuery,因此您必须在文档中引用它(如示例代码中所做的那样)。
相关文章:
- 音频控件在mouseover上显示,在mouseout上淡出
- Javascript将图像src更改为淡入淡出
- css(或jQuery)悬停时淡入淡出
- 将淡入淡出添加到“我的身体背景滑块”
- 多重潜水淡入淡出打开
- 添加/删除类淡入淡出不起作用
- 在容器中心滚动时淡出
- 带有计数器、缩略图、进度条和淡入淡出效果的简单jQuery幻灯片
- jQuery图像幻灯片,在停止后淡出到第一张图像
- jQuery淡出后停止自动滚动
- 在这个幻灯片中没有淡出效果JavaScript,CSS和HTML
- Gridview ImageButton更改mouseover和mouseout上的图像
- 使用jquery淡入淡出
- 淡入淡出脚本不起作用
- d3防止在上下文菜单上触发mouseout
- 具有淡入淡出效果的全背景图像
- 3秒后淡出文本
- jQuery滑块淡入淡出
- 在淡入淡出之间淡入淡出
- mouseout淡出问题没有应用JavaScript/jQuery