Сначала спрячьте детей, а затем уменьшите ширину родителя.

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 должен иметь ширину = 20 пикселей. Когда пользователь наводит указатель мыши на левую кнопку мыши, левая область должна стать шириной 197 пикселей с плавной анимацией, и теперь должны быть видны дочерние элементы. Когда пользователь наводит курсор мыши, дочерние элементы должны быть скрыты, а ширина влево должна составлять 20 пикселей только с анимацией.

Как я могу сделать это в 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");
  });
  ...
});

edit : плохо, я неправильно прочитал ваш вопрос, просто выделите всех детей и скройте их (:

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