Hide the children first and then reduce the width of the parent
I have a layout like this:
<div id="outerwrap">
<div id="innerwrap">
<div id="centerc">...</div>
<div id="rightc" style="font-weight:bold">
</div>
<div style="background-color:White;height:10px;top:284px;left:0px"></div>
<div id="leftc">..</div>
</div>
<div id="footer"">...</div>
#outerwrap
{
background-color: #EE44E7;
}
#innerwrap
{
background-color: #EE44E7;
margin-right: 200px;
top:0px;
height:100%;
}
#leftc
{
position: absolute;
top: 111px;
left: 0px;
width: 197px;
background-color: #EE44E7;
font-size: 10px;
}
#centerc
{
position: relative;
margin-left: 199px;
padding: 0px;
background-color: white;
}
#rightc
{
position: absolute;
top:111px;
right: 0px;
width: 199px;
color: blue;
background-color: #EE44E7;
font-size: 10px;
}
#footer
{
padding: 0px;
margin: 0px;
width: 100%;
height: 62px;
visibility: hidden;
}
The left element has children in it, including the images inside it.
What I want to do is that when the page loads, the children on the left should be hidden and the left should have a width = 20px. When the user hovers the 'on' leftc, the left should become 197px wide with smooth animation and the children should now be visible. When the user hovers over the mouse, the children should be hidden and the width to the left should be 20 pixels with animation only.
How can I do this in jQuery that works in all browsers including IE8. Thanks.
a source to share
Something like that:
$(document).ready(function() {
$("#leftc").css("width", "20px").children().css("display", "none");
$("#leftc").hover(function() {
$(this).stop();
$(this).animate({ width: "197px" }).children().css("display", "block/inline");
}, function() {
$(this).stop();
$(this).animate({ width: "20px" }).children().css("display", "none");
});
...
});
edit : my bad one, I read your question wrong, just select all children and hide them (:
2nd edit: see code above for hover-fix. You can use a function stop()
to stop all animations on this element so that you start from yourself every time. If you want to do it with a click event, you can simply set the flag like this:
var leftActive = false;
$("#leftc").click(function() {
if (leftActive) {
$(this).animate({ width: "20px" }).children().css("display", "none");
leftActive = false;
} else {
$(this).animate({ width: "197px" }).children().css("display", "block/inline");
leftActive = true;
}
});
a source to share