I have made an effect that has the h1 move and then reveals p using .addClass, .removeClass and CSS3 transition. It works perfectly but I think I am repeating too much of the code and I think there may be a way to write it better. I need postShow and postHide to be different because I need setTimeout to be in postShow for timing. Please review the code below and give me any pointers.jQuery(document).ready(function($){    var post          = $('div.post');    var postShow = function(item) {            $(item).closest('a').find('img.postimg').addClass('imggrow');            $(item).closest('a').find('h1').addClass('bannerhover');            setTimeout(function(){                $(item).closest('a').find('p.excerpt').addClass('phover');            },500);        };    var postHide = function(item) {            $(item).closest('a').find('img.postimg').removeClass('imggrow');            $(item).closest('a').find('h1').removeClass('bannerhover');            $(item).closest('a').find('p.excerpt').removeClass('phover');    };//-----------------------------------------------------------    if ($(window).width() > 1000) {        post.hover(function() {            $(this).find('a').find('p.excerpt').show(0, function() {                postShow(this);            });        },function() {            $(this).find('a').find('p.excerpt').hide(0, function() {                postHide(this);            });        });    }//--------------------------------}); 
Show and hide posts using setTimeout
javascript;jquery;animation;dom
Forewarning: My first post in Code Review! Here goes.jQuery(document).ready(function($){var post = $('div.post');function postShowHide(showing) {        var a = $(this).closest('a');        a.find('img.postimg').toggleClass('imggrow', showing);        a.find('h1').toggleClass('bannerhover', showing);        function sethover(){            a.find('p.excerpt').toggleClass('phover', showing);        }        if (showing) {            setTimeout(sethover, 500);        }        else {            sethover();        }    };//-----------------------------------------------------------if ($(window).width() > 1000) {    post.hover(function() {        $(this).find('a p.excerpt').show(0, postShowHide.bind(this, true));    },function() {        $(this).find('a p.excerpt').hide(0, postShowHide.bind(this, false));    });}//--------------------------------});Couple things I made use of here: JQuery and similar frameworks have a toggle class variant that takes a Boolean parameter to either add or remove the class. This is useful for any situation that adds/removes the class since it means you only need one function, not two (as long as you can take a parameter)To make the setTimeout(500) part work with that, I did end up separating it into a function, and conditional calling mechanism. This at least centralizes the logic, although it does elongate the method a bit.If you're creating a callback that simply calls another function, often you can use Function.bind instead. The first argument is the target value of the this keyword, then the following arguments will be passed into the function. (If you're me and have an arbitrary contractual obligation to support Safari 5.0 for no reason, you can't use it but JQuery may have a similar method.)