Question

I am trying to integrate jquery effect in conjunction with html link for instance :
when i click on a link it should display the particular div which is in the master page , It should also navigate to the required page , below is the code which I am using to achieve this with no success:

<script type="text/javascript">
$(document).ready(function () {

 $('#services-sub-menu').hide();
   $('#services').click(function () {
     $('#services-sub-menu').show("slow");
     return false;
      });

});
 <div class="Menu2"><a href="/articles" id="articles">ARTICLES</a><br /> <a href="/services" id="services">TESTIMONIALS</a><br /><a href="#" id="contact">CONTACT US</a></div>
 </div><div class="sub-menu">
  <div id="services-sub-menu"><a href="/services-submenu" /></div>

</div>

The jquery effect is working but the page is not navigating to the services page

Answer 1

By returning false at the end of your click, you basically tell the browser to halt it’s default behaviour.

The jQuery equivelent of this would be:

event.preventDefault();

where

$('#services').click(function (event) {

Removing your return false will allow the link to work as expected however it may redirect before your anmiation has completed.

What you can do is add a callback to the show method and redirect using Javascript inside there.

$('#services-sub-menu').show("slow",function(){
  // Stuff that will happen when animation has completed
  window.location.replace(redirectionUrl);
});

Update

Here’s a very basic working example: http://jsfiddle.net/XakkU/

<a href="http://www.google.com" id="clicker">Click me </a>
<div id="showMe">Hold on, we're taking off!</div>

$('#clicker').click(function(event){
    $('#showMe').show('slow',function(){
        window.location.replace($('#clicker').attr('href'));
    });
    event.preventDefault();
});