Question

我的项目中有一些div，它有一些使用java-script完成鼠标移动的动画。现在我的问题在于页面加载我需要隐藏所有div并且只显示div的标题，并且在鼠标悬停此标题时我应该能够在完成所有动画的情况下使div可见。 / p>

以下是我的代码：

<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');
});
});

Answer 1

首先，一堆评论：

HTML中没有#nav。
visibility: visible;不是有效的JavaScript。
'#<%= hdnSelected.ClientID %>'看起来像是使用服务器端语言生成JavaScript。如果你这样做，不要这样做。如果你不这样做（例如，如果它是我以前从未见过的客户端模板引擎），请确保此行正在按照您的预期进行。
确保声明$this变量。
你有什么尝试？

你已经有了动画。你接下来要做的是显示和隐藏元素。 simple Google search引导您进入jQuery函数show();类似地，有一个hide()函数。

如何将这两个功能应用于实际代码？

Answer 2

这是 Working Fiddle 。

将此添加到Document Ready。

$('#policies,#qhse').hide();

修复了以下小错误。

可见性：可见;
'visible'：'false'

仍然无法确定<ul>标签的位置。隐藏，哈弗工作正常。

在页面加载时隐藏div标记

2 个答案: