Question

How would I go about setting a link to perform certain functions like hide div then go to destined url

something like this

$(document).ready(function(){
$(“a”).click(function(){
$(“#div1”).slideUp(“slow”);
$(“#div2”).slideUp(“slow”);
// then go to index.html
});
});

This is my setup.

<script type="text/javascript">   $(document).ready(function(){
     $("a").click(function(){
     $("#one").hide("slow");
     $("#two").hide("slow" , function(){
     window.location (index.html);
       });
    });   });    </script>   

<div id="one"> some content </div>

<div id="two"> some content </div>

<a href="#">BUTTON HERE</a>

It only performs the hide function, if I replace the url in the html it perform the url only. I must be doing something Wrong

Answer 1

“Location” is actually a property of the window object, not a method. This means you need to assign it with =, instead of passing it as a parameter with (). Try this code out:

$("a").click(function(event){ 
    event.preventDefault();
    var url  = $(this).attr("href");
     $("#div1").slideUp("slow"); 
     $("#div2").slideUp("slow", function(){
       window.location=url;
    }); 
 }); 

Also, the default behavior of a link is to go to a URL, and it’s going to run that behavior unless you stop it with something like “return false;”. While setting the href to “#” won’t take a user anywhere, it WILL scroll them to the top of the page, which could be annoying. Better to just return false it.