CSS Div, которые могут сжиматься, когда Другой Div Анимирует

http://jsfiddle.net/qmmVC/CSS Div, которые могут сжиматься, когда Другой Div Анимирует

У меня есть заголовок DIV и скрытый всплывающий DIV внутри контейнера DIV.

Когда я нажимаю кнопку, я хочу переключить непрозрачность и ширину всплывающего div так, чтобы она расширялась на место, и я хочу, чтобы заголовок div уменьшался.

В настоящее время то, что он делает, приводит к тому, что заголовок заголовка падает ниже всплывающего div, в некоторый текст абзаца.

Как я могу сдержать заголовок div, чтобы сохранить его верхнюю/левую координату, но уменьшить/расширить его ширину/высоту?

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
     body { 
      font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; 
      overflow: hidden; 
     } 
     #popup { 
      position: relative; 
      top: -3px; 
      background: #e8e8e8; 
      margin: 3px 10px; 
      padding: 10px; 
      width: 250px; 
      height: 80px; 
      display: none; 
      float: right; 
      -moz-border-radius: 15px; 
      border-radius: 15px; 
      border: 1px solid #000; 
     } 
     #heading { 
      position: relative; 
      top: -3px; 
      font-size: 1.5em; 
      min-width: 50px; 
      height: auto; 
      overflow: auto; 
      margin: 3px; 
      float: left; 
     } 
     .button { 
      margin: 3px; 
      width: 120px; 
      height: 40px; 
      color: #fff; 
      background: #cc0066; 
      text-align: center; 
      vertical-align: middle; 
      line-height: 40px; 
      -moz-border-radius: 5px; 
      border-radius: 5px; 
     } 
     .container { 
      margin: 3px 3px; 
      padding: 5px; 
      width: 550px; 
      height: 460px; 
      border: 1px solid #000; 
     } 
     </style> 
     <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> 
    </head> 
    <body> 
     <div class='container'> 
      <div id="popup">Here is a new section that appears</div> 
      <div id="heading">This Is Heading Text In Collapsable Div</div> 
      <br/> 
      <br/> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis in magna eu faucibus. Vestibulum vel fringilla diam. Nulla eget posuere massa. Pellentesque fringilla sapien in rutrum gravida. Phasellus sapien ligula, sagittis sed tellus vitae, semper feugiat nulla. In fermentum, elit eget ornare mattis, mi elit pretium arcu, eget cursus augue velit ac leo. In hendrerit justo eu metus adipiscing, sit amet venenatis sem elementum. Vivamus quis turpis sed elit ultrices molestie. Ut tincidunt, felis eget varius elementum, ante dui semper sapien, quis iaculis ligula urna at neque. In euismod, diam ultrices gravida hendrerit, augue mi luctus dolor, non accumsan purus risus non massa. Sed eget elementum odio. Morbi laoreet magna ac purus venenatis porttitor. Donec et augue a lacus consequat eleifend. Sed fringilla magna et posuere auctor. Donec vel hendrerit nibh. In feugiat dapibus risus eu porta.</p> 
      <div class="button">Click Me</div> 
     </div> 
     <script> 
      $(".button").click(function() { 
       $("#popup").animate({ 
        width: "toggle", 
        opacity: "toggle" 
       }, "slow"); 
      }); 
     </script> 
    </body> 
</html>

источник

2013-06-26 Swoop

Может быть, используя позицию: абсолютная на #heading DIV? –

Не уверен, что я полностью понимаю, чего вы хотите, но я возьму выстрел. рассмотреть вопрос о создании заголовок и текст пункта в том же <div>, например, так:

<div class='container'> 
    <div id="popup">Here is a new section that appears</div> 
    <div> 
     <h1>This Is Heading Text In Collapsable Div</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis in magna eu faucibus. Vestibulum vel fringilla diam. Nulla eget posuere massa. Pellentesque fringilla sapien in rutrum gravida. Phasellus sapien ligula, sagittis sed tellus vitae, semper feugiat nulla. In fermentum, elit eget ornare mattis, mi elit pretium arcu, eget cursus augue velit ac leo. In hendrerit justo eu metus adipiscing, sit amet venenatis sem elementum. Vivamus quis turpis sed elit ultrices molestie. Ut tincidunt, felis eget varius elementum, ante dui semper sapien, quis iaculis ligula urna at neque. In euismod, diam ultrices gravida hendrerit, augue mi luctus dolor, non accumsan purus risus non massa. Sed eget elementum odio. Morbi laoreet magna ac purus venenatis porttitor. Donec et augue a lacus consequat eleifend. Sed fringilla magna et posuere auctor. Donec vel hendrerit nibh. In feugiat dapibus risus eu porta.</p> 
    </div> 
    <div class="button">Click Me</div> 
</div>

источник

2013-06-26 15:44:04 shennan

Ваше изменение дало мне желаемые реакции. Все еще не уверен, почему текст заголовка внутри элемента div заставлял div перемещаться ниже всплывающего div на анимацию. – Swoop

Ну, во-первых, ваши правила заголовка CSS, возможно, нуждались в небольшом выкупе и подталкивании. Возможно, вы захотите повторно назначить правила обратно в div (стиль-меньше), который я создал, но делайте это постепенно \ осторожно и без атрибута 'min-width'. – shennan

Нашел! Спасибо – Swoop

Вы можете переключать класс использовать тумблер для достижения этой цели.

http://jsfiddle.net/derekstory/qmmVC/1/

HTML

<body> 
    <div class='container'> 
     <div id="popup">Here is a new section that appears</div> 
     <div id="heading" class="heading1">This Is Heading Text In Collapsable Div</div> 
     <br/> 
     <br/> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis in magna eu faucibus. Vestibulum vel fringilla diam. Nulla eget posuere massa. Pellentesque fringilla sapien in rutrum gravida. Phasellus sapien ligula, sagittis sed tellus vitae, semper feugiat nulla. In fermentum, elit eget ornare mattis, mi elit pretium arcu, eget cursus augue velit ac leo. In hendrerit justo eu metus adipiscing, sit amet venenatis sem elementum. Vivamus quis turpis sed elit ultrices molestie. Ut tincidunt, felis eget varius elementum, ante dui semper sapien, quis iaculis ligula urna at neque. In euismod, diam ultrices gravida hendrerit, augue mi luctus dolor, non accumsan purus risus non massa. Sed eget elementum odio. Morbi laoreet magna ac purus venenatis porttitor. Donec et augue a lacus consequat eleifend. Sed fringilla magna et posuere auctor. Donec vel hendrerit nibh. In feugiat dapibus risus eu porta.</p> 
     <div class="button">Click Me</div> 
    </div> 
</body>

CSS

.heading1 { 
    position: absolute; 

    top: 10px; 
    font-size: 1.5em; 
    min-width: 50px; 
    height: auto; 
    overflow: auto; 
    margin: 3px; 
    float: left; 
} 
.heading2 { 
    position: absolute; 
    margin-bottom: 10px; 
    top: 10px; 
    font-size: 1.5em; 
    min-width: 50px; 
    height: auto; 
    overflow: auto; 
    margin: 3px; 
    float: left; 
    width: 300px; 
}

$(".button").click(function() { 
    $("#heading").toggleClass('heading2'); 
    $("#popup").animate({ 
     width: "toggle", 
     opacity: "toggle" 
    }, "slow"); 

});

источник

2013-06-26 15:50:13

Это решение сработало. спасибо – Swoop

CSS Div, которые могут сжиматься, когда Другой Div Анимирует

ответ

Смежные вопросы