Header and navbar animations on a website I was wondering if there was a way to rewrite this to be a bit more clean. It seems a bit odd to have a mouseenter and a mouseleave for this. Surely there's a toggle of some kind?

$(document).ready(function() {

// Post header animation
$('h1.post').mouseenter(function() {
    $(this).animate({ paddingLeft: 10 }, 300);
});
$('h1.post').mouseleave(function() {
    $(this).animate({ paddingLeft: 0 }, 300);
});

// Navbar hover animation
$("h1#button").mouseenter(function() {
    $(this).animate({opacity: 0.60}, 100);
});
$("h1#button").mouseleave(function() {
    $(this).animate({opacity: 1}, 100);
});

// Contact div toggle
$("h1.icons").click(function() {
    $(".icon-wrapper").slideToggle("slow");
});
});


My website is http://gamer-simms.herokuapp.com if you want to look.
You can condense this a bit by using jQuery's hover method:

$('h1.post').hover(function() {
    $(this).animate({ paddingLeft: 10 }, 300);
}, function() {
    $(this).animate({ paddingLeft: 0 }, 300);
});

$("h1#button").hover(function() {
    $(this).animate({opacity: 0.60}, 100);
}, function() {
    $(this).animate({opacity: 1}, 100);
});