Problems with EventHandler .click () and .animate ()

Navigation
1

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

The problem is that if I change .mouseout() to .click() .animate() does not work. I tested it with background-color too.

The funny thing is that it gives alert() , but does not apply .animate() when using click() .

The other eventhandlers ( .mouseout() .mousemove() .mouseover() ...) function normally.

Does anyone know why this happens?

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');
});
    
asked by anonymous 03.06.2014 / 21:34

1 answer

2

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

$('#nervID').click(function(event){
    alert("entrou");
    $('.page').animate({'opacity':'0.00'}, 300, 'linear');
    event.preventDefault();
});
    
03.06.2014 / 21:47
Combobox update linked to Binding Using Codeigniter inside Wordpress