Cleaning up a chunky function
Hello all,
I have created the following function to expand a container depending on which one is hovered over, but need some advice on how to tidy it up.
There are four containers in all: three expand to the right and the final one expands to the left. There is a hidden element in the expandable area which appears when the container has fully expanded. For example: if I hover over .sub-main section.other, then the hidden div .other .right fades up. Mouseout and it fades down quickly as the .sub-main section.other retracts.
The working example is here: http://www.newmedia.ie/temp/expand-box.html
The following code does work, but I am aware that it could probably be reduced to half as many lines using some conditional cleverness:
$(document).ready(function(){
// Hides right or left divs depending on the block
$('.other .right').hide();
$('.end .left').hide();
// For the first three services blocks
$(".sub-main section.other").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('.inner').addClass("hover").stop()
.animate({
marginTop: '0px',
marginRight: '0px',
top: '0',
right: '0',
width: '458px',
height: '216px',
padding: '0px'
}, 200,
function () {
$('.other .right').fadeIn('1000')
});
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('.inner').removeClass("hover").stop()
.animate({
marginTop: '0',
marginRight: '0',
top: '0',
right: '0',
width: '218px',
height: '216px',
padding: '0'
}, 50,
function () {
$('.other .right').fadeOut('50')
});
});
// For the last services block
$(".sub-main section.end").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('.inner').addClass("hover").stop()
.animate({
marginTop: '0px',
marginRight: '0px',
top: '0',
right: '0',
width: '458px',
height: '216px',
padding: '0px'
}, 200,
function () {
$('.end .left').fadeIn('1000')
});
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('.inner').removeClass("hover").stop()
.animate({
marginTop: '0',
marginRight: '0',
top: '0',
right: '0',
width: '218px',
height: '216px',
padding: '0'
}, 50,
function () {
$('.end .left').fadeOut('50')
});
});
});
Any advice would be really appreciated and apologies if this is posted in the wrong section.
Cheers,
Spen