在頁面加載時隱藏div標簽

Question

我的項目中有一些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');
});
});

Answer 1

首先，一堆話：

• 您的HTML中沒有#nav 。

• visibility: visible; 函數內部不是有效的JavaScript。

• '#<%= hdnSelected.ClientID %>'似乎是您使用服務器端語言生成JavaScript。 如果這樣做，則不要這樣做。 如果不這樣做（即，如果它是我從未見過的客戶端模板引擎），請確保該行正在執行您期望的操作。

• 確保已聲明$this變量。

• 你嘗試了什么？

您已經有動畫了。 接下來要做的就是顯示和隱藏元素。 一個簡單的Google搜索將帶您到jQuery函數show() ； 同樣，有一個hide()函數。

您如何將這兩個功能應用於實際代碼？

Answer 2

這是一個工作小提琴 。

將此添加到“文檔就緒”中。

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

並修復了一些小錯誤。

• 能見度：可見；

• 'visible'：'假'

仍然無法弄清楚<ul>標簽在哪里。 隱藏，懸停效果很好。