1
\$\begingroup\$

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.

\$\endgroup\$
2
\$\begingroup\$

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);
});
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.