Problems with Eventhandler . click() and . Animate()

Question

When I use $('#nervID').mouseout(function(){/* ... */}); the alert() works and the .animate() works normally with opacity running and being applied to class elements .page

The problem is that if I change .mouseout() for .click() does not work the .animate(). I tested with background-color also.

The funny thing is he gives the alert(), but does not apply the .animate() when I use click().

The others eventhandlers (.mouseout() .mousemove() .mouseover()...) work normally.

Does anyone know why this is happening?

HTML:

<div class="menucontainer"> 
    <ul class="gambiarraNav">
        <li class="navli"><a href="">   <p class="navp">Home</p></a></li>

        <li><a href=""><p class="navp">Pictures</p></a>
            <ul>
                  <li><a href="">Sub tab 1</a></li>
                  <li><a href="">Sub tab 2</a></li>
                  <li><a href="">Sub tab 3</a></li>
                  <li><a href="">Sub tab 4</a></li>
            </ul>

        </li>

        <li><a href=""><p class="navp">Asuka</p></a>
            <ul>
                  <li><a href="">Sub tab 1</a></li>
                  <li><a href="">Sub tab 2</a></li>
                  <li><a href="">Sub tab 3</a></li>
                  <li><a href="">Sub tab 4</a></li>
            </ul>

        </li>

        <li id="nervID"><a href="" ><p class="navp">Nerv</p></a></li>
   </ul>
</div>

jQuery:

$('#nervID').mouseout(function(){
    alert("entrou");
    $('.page').animate({'opacity':'0.00'}, 300, 'linear');
});

Answer 1

In his <li id="nervID"> there is a link <a href="" ><p class="navp">Nerv</p></a>, when you put the function to onclick does not work, because by clicking, it is assumed that you are clicking on link, that in your code leads to your own page, so issues the alert and the animate does not work, you need to add a preventDefault(), so when the click is called the standard event of the href is not triggered:

$('#nervID').click(function(event){
    alert("entrou");
    $('.page').animate({'opacity':'0.00'}, 300, 'linear');
    event.preventDefault();
});