I\'m trying to get an effect similar to what you can find at http://www.nokiausa.com/us-en/products/ with a grid of basic information, where a click expands information over
Is this what you were meaning?
Please excuse the horrendous formatting, I wrote it quickly
http://jsfiddle.net/y3QBw/5/
var li_original_height = $('#stuff1').css('z-index');
function growRight() {
var $stuff = $('#stuff1'),
li_left = $stuff.offset().left,
li_top = $stuff.offset().top,
li_stuff_width = $stuff.outerWidth(true) + 5,
$sibling = $stuff.next();
$sibling.css('margin-left', li_stuff_width);
$stuff
.css({
'z-index': 1000,
background: '#588EC8',
position: 'fixed',
top: li_top,
left: li_left,
margin: 0
})
.animate({
width: "510px"
}, 750, function() {});
}
function hideRight() {
var $stuff = $('#stuff1'),
$sibling = $stuff.next();
$stuff.animate({
width: "250px"
}, 750, function() {
$stuff.css({
'z-index': li_original_height,
background: '#B8B8B8',
position: 'relative',
top: 'auto',
left: 'auto',
margin: 5
});
$sibling.css('margin-left', 5);
});
}
$('#stuff1 a').toggle(
function () {
growRight();
return false;
},
function () {
hideRight();
return false;
}
);
In my opinion, this calls for some clever usage of position:absolute
. z-index
only sets the order for elements that would appear on top of each other in the first place.
Ok, I managed to find a solution which pretty much follows the approach I mentioned in the question - this clones the cell, which in turn animates. CSS properties ensure "expandinatorright" sits absolutely on top of its parent (of course, with z-index making sure it is rendered above everything else).
function growRight(){
$('.stuff')
.clone(false)
.addClass('expandinatorright')
.appendTo($('.stuff'));
$('.expandinatorright').animate({
backgroundColor: "#FF8600"
}, 750 );
$('.expandinatorright').animate({
width: "510px"
}, 750, function() {});
}
I hope this is useful for anyone who might run into a similar problem.
Just taking a quick stab at this, I would suggest that before animating, add a z-index
property to the element that you wish to enlarge. This should make it go above the neighboring element and hide it instead of pushing it down.
Something like:
function growRight(){
$("#stuff1").css("z-index","5");
$('#stuff1').animate({
backgroundColor: "#FF8600"
}, 750 );
$('#stuff1').animate({
width: "510px"
}, 750, function() {});
}