JQuery actions immediately "undo" themselves?

JQuery actions immediately "undo" themselves?

So I am no stranger to Jquery... Used it many times in the past. But I have an issue I cannot seem to understand. I am working on my own portfolio site and I have a grid of href's that are meant to be clicked, animating the parent DIV up 650 px and then queue another action which I have yet to develop. 

When I started developing this, I was unable to get anything to happen at all. So I checked my work and saw that the events were being recognized because I could get an alert message to pop up. But beyond that I simply could not get any action to happen. What I later discovered, which the example below shows, is that every action I queue up, simply undoes itself a split second after it happens.

Because when I coded it to move the parent div up 650px nothing happened at all, I decided to run a script that would be more obvious to notice like removing a css class. If I run this script, which is to remove the css class from the href, the class is removed and then put right back on it self again a split second later.

If anyone has an idea of what is causing this.... or perhaps I am overlooking something blatantly obvious, could you please let me know.

Thanks in advance!

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >


    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <meta name="date" contents="20100101">
    <meta name="type" contents="Service">
    <meta name="language" contents="ENG">
    <meta name="rights" contents="All Rights Reserved">
    <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
    <link rel="stylesheet" type="text/css" href="style/stylesheet.css" />
    <link rel="shortcut icon" type="image/x-icon" href="style/images/favicon.ico" />
    <link rel="icon" type="image/x-icon" href="style/images/favicon.ico" /> 
    <link rel="icon" href="style/images/favicon.png" type="image/png">
    <script type="text/javascript" language="javascript" src="js/jquery-1.4.2.js" ></script>
    </head>
    <body>
    <div id="wrapper">
    <div id="header">
    <h1>Welcome - Please Choose a Task</h1>
    </div>
    <div id="portal">
    <div id="tasks">
    <a class="tasklink" id="one" href=""><h2 class="task">View</h2><p class="task">My portfolio<br/>of work</p></a><a class="tasklink" id="two" href=""><h2 class="task">Read</h2><p class="task">What I can<br/>do for you</p></a><a class="tasklink" id="three" href=""><h2 class="task">Contact</h2><p class="task">Me</p></a><a class="tasklink" id="four" href=""><h2 class="task">Download</h2><p class="task">My: Resume<br/>Contact Card</p></a><a class="tasklink" id="five" href=""><h2 class="task">Connect</h2><p class="task">With me on my<br/>social networks</p></a><a class="tasklink" id="six" href=""><h2 class="task">Submit</h2><p class="task">My portfolio to<br/>sites like: <span style="font-size: 15px; line-height: 20px;"><br/>digg.com, stumbleupon,<br/>google, reddit, etc</span></p></a>
    <a id="taskreturn" href=""><img src="style/images/taskreturn.png"/></a>
    </div>
    </div>
    <div id="footer">
    </div>
    </div>
    <script type="text/javascript" language="javascript" >
    $(document).ready(function(){
    $("#one").click(function(event){
         $(this).removeClass("tasklink");
    });
    });
    </script>
    </body>
    </html>