script acts two times

script acts two times

Hello guys,

I've recently fallen into a newbie issue:

I'm trying to move an element with the following code :

$(function() {
    $(".navigation").mouseover(function(){
      $(this).animate({
        marginTop: "8px",
        borderWidth: "1px"
      }, 300 );
    });
   $(".navigation").mouseout(function(){
      $(this).animate({
        marginTop: "-8px",
        borderWidth: "1px"
      }, 300 );
    });
});


IE doesn't react at all if I delete the borderWidth: "1px" part, which I got from the JQuery Docs, and which I really don't need.
But when erased, the script stops working in IE. (?)

Then, when I leave the mouse from the elements, the code acts twice ... (?).

I think is a syntax problem ... combined maybe with my html and css, which I pass to present:

the HTML:

<div>
<ul>
<li class="navigation"><img src="images/about.png" width="85" height="28" /></li>
</ul>
</div>

the CSS: a border in the right side of the element ".navigation".

Plz help,