You can use a hover
event handler to set your in and out handler function.
Is more simple if you set your hover on a wrapping element like #p2
, so it will be fired when you enter/exit the wrapper not its children.
Code:
$('document').ready(function () {
$("#p2").hover(function () {
$(this).css("cursor", "pointer")
$("#image").css("left", "75");
$("#image").stop().animate({
width: "145px",
height: "145px",
left: "0"
}, 'slow');
$("#c").animate({
top: "100"
}, 'slow');
}, function () {
$("#image").stop().animate({
width: "0%",
height: "0%",
left: "75"
}, 'slow');
$("#c").animate({
top: "0"
}, 'slow');
});
});