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);
});
});
}
//--------------------------------
});