在页面加载时隐藏div标签

Question

I have some div's in my project which has some animation on mouse-over done using java-script. Now my problem is on page load i need to hide all the div's and display only title of the div,and on mouse-over of this title i should be able to make the div visible with all the animation done.

Below is my code:

<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

First, a bunch of remarks:

• There is no #nav in your HTML.

• visibility: visible; inside a function is not a valid JavaScript.

• '#<%= hdnSelected.ClientID %>' looks like you're generating your JavaScript using a server-side language. If you do, don't do it. If you don't (ie if it's some client-side template engine I've never seen before), make sure this line is doing what you expect it to do.

• Make sure $this variable is declared.

• What have you tried?

You already have your animation. What you want to do next is to show and hide elements. A simple Google search leads you to the jQuery function show() ; similarly, there is a hide() function.

How can you apply those two functions to your actual code?

Answer 2

Here is a Working Fiddle .

Added this to Document Ready.

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

And following minor errors fixed.

• visibility: visible;

• 'visible': 'false'

Still not able to figure out where <ul> tags are. Hide,Hover works fine.