Tell me more ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 1 down vote favorite

New to the whole jQuery malarky, but having a lot of fun with it. 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.

Any help is appreciated.

share|improve this question

1 Answer

up vote 2 down vote accepted

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);
});
share|improve this answer
Awesome! Thank you very much, that was just what I was looking for. – Tamachan87 Jan 15 at 9:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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