我的元素中有一些 div,其中有一些鼠标悬停时使用 java 脚本完成的动画。 现在我的问题是页面加载,我需要隐藏所有的 div,只显示 div 的标题,当鼠标悬停在这个标题上时,我应该能够在完成所有动画后使 div 可见。
下面是我的代码:
<div id='Qhse' class="item user">
<h2>qhse</h2>
<div id='qhse' class="qhse" runat="server" >
</div>
</div>
<div id='Policies' class="item home">
<a href="#" class="icon"> </a>
<h2>policies</h2>
<div id='policies' class="policies" runat="server" >
</div>
</div>
CSS
#qhse{
padding-top: 0.3em;
padding-bottom:0.3em;
background-color: #2C6D2C;
width: 100%;
height: 100%;
text-align: center;
vertical-align:middle;
}
#policies{
padding-top: 0.3em;
padding-bottom:0.3em;
background-color: #2C6D2C;
width: 100%;
height: 100%;
text-align: center;
vertical-align:middle;
}
JS
$(function () {
$('#nav > div').hover(function () {
visibility: visible;
var field = $('#<%= hdnSelected.ClientID %>');
field.val(this.id);
var $this = $(this);
$this.find('div').stop().animate({
'width': '100%',
'height': '100%',
'top': '-25px',
'left': '-25px',
'opacity': '1.0'
}, 500, 'easeOutBack', function () {
$(this).parent().find('ul').fadeIn(700);
});
$this.find('a:first,h2').addClass('active');
},
function () {
var $this = $(this);
$this.find('ul').fadeOut(500);
$this.find('div').stop().animate({
'width': '52px',
'height': '52px',
'top': '0px',
'left': '0px',
'opacity': '0.1',
'visible': 'false'
}, 5000, 'easeOutBack');
$this.find('a:first,h2').removeClass('active');
});
});
最佳答案
这是一个 Working Fiddle .
将此添加到文档就绪。
$('#policies,#qhse').hide();
并修复了以下小错误。
可见性:可见;
'可见': '假'
仍然无法弄清楚在哪里<ul>
标签是。隐藏,悬停效果很好。
关于c# - 在页面加载时隐藏 div 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23903102/