jQuery's animate()
animates CSS properties, so you should probably stick with animating the same property, as left
and right
are two different CSS properties
$(function() {
$('#box img').hover(function () {
$(this).animate({
left: '2px'
}, 600);
}, function () {
$(this).animate({
left: '0px'
}, 600);
});
});
Also note that in some cases you have to set an inital value in CSS, as jQuery can't compute default values like inherit
or auto
, and that setting left and top values doesn't work without a position
#box img {position: relative; left: 0}