# 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. ## 1 Answer 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);
});