隐藏儿童第一和然后降低母体

Question

的宽度我有布局如下：

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

在div leftc具有子元素，包括在其内部的图像。

我想要做的是，当页面加载时，leftc的孩子应该隐藏，并且leftc应该有width = 20px。当用户将鼠标悬停在'left'上时，leftc应该变成197px宽，并且平滑的动画，现在儿童应该可见。当用户将鼠标移出鼠标时，应该隐藏孩子，只有动画才能将左边的宽度设置为20px。

如何在jQuery中执行此操作，该操作适用于包括IE8在内的所有浏览器。谢谢。

Answer 1

事情是这样的：

$(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"); 
    }); 
    ... 
}); 

编辑：我不好，我错看了你的问题，只需选择所有儿童和隐藏它们（：

2日编辑：看到上面的代码你可以使用stop()函数来停止该元素上的所有动画，这样你就可以每次都开始新鲜。 如果你想用点击事件做到这一点，你可以简单地设置一个像这样的标志：

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