Защо не ми се получава повдигането

[hisar]

Здавйте имам един елементарен код за повдигане на ефект или друго яче като се мине върху него картинката с клас .фаце да се премества с -20px но не се получава:

	$(".face").mouseover(function(){
		$(this).animate({
			marginTop: "-20px"
		});
	});

jQuery

 

[cnoko]

дай и HTML
При мене става

<script src="jquery/js/jquery-1.4.2.min.js" type="text/javascript" language="Javascript"></script>
<script>
$(function(){
$(".face").mouseover(function(){ 
      $(this).animate({ 
         marginTop: "-20px" 
      });
   });	
});
</script>
<img src="images/smilies/icon_arrow.gif" class="face" />

 

[hisar]

<div id="canals">
		<div id="canals_title">Канали</div>
			<div id="canals_body">
		<a href="http://facebook.com/"><img class="face" style="width: 28%; margin-top: -10px;" src="img/facebook.png" alt="FaceBook Icon" title="Нашата Фен Група В FaceBook"></a>
		     <a href="rss.php"><img class="rss" style="width: 28%;" src="img/rss.png" alt="rss"></a>

	</div></div>

 

[t0m3kk]

я пробвай така

<html>
<head>
	<title>test</title>	
	<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript" language="Javascript"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		var button = $('.face');
		button.hover(function() {
			$(this).animate({
			marginTop: "-10px"
			}, 500);
		}, function() {
			$(this).stop().animate({
			marginTop: "0px"
			}, 500);
		});
	});
	</script> 
	</head>
<body>
	<img class="face" src="http://men.hotnews.bg/images/facebook.gif" alt="FaceBook Icon" title="Нашата Фен Група В FaceBook">
</body>
</html>

 

[cnoko]

кода си работи нещо в CSS е проблем
Ето:

  $(".face").mouseover(function(){ 
      $(this).animate({ 
         marginTop: "-20px" 
      }); 
 alert(this.style.marginTop);
   });

Излиза -20px
за съжаление не мога да помогна