[英]Hide div tag on page load
我的项目中有一些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');
});
});
首先,一堆话:
您的HTML中没有#nav
。
visibility: visible;
函数内部不是有效的JavaScript。
'#<%= hdnSelected.ClientID %>'
似乎是您使用服务器端语言生成JavaScript。 如果这样做,则不要这样做。 如果不这样做(即,如果它是我从未见过的客户端模板引擎),请确保该行正在执行您期望的操作。
确保已声明$this
变量。
你尝试了什么?
您已经有动画了。 接下来要做的就是显示和隐藏元素。 一个简单的Google搜索将带您到jQuery函数show()
; 同样,有一个hide()
函数。
您如何将这两个功能应用于实际代码?
这是一个工作小提琴 。
将此添加到“文档就绪”中。
$('#policies,#qhse').hide();
并修复了一些小错误。
能见度:可见;
'visible':'假'
仍然无法弄清楚<ul>
标签在哪里。 隐藏,悬停效果很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.