我的项目中有一些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');
});
});
这是一个工作小提琴。
将此添加到“文档就绪”中。
$('#policies,#qhse').hide();
并修复了一些小错误。
能见度:可见;
'visible':'假'
仍然无法弄清楚<ul>
标签在哪里。隐藏,悬停效果很好。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句