CSS的div可以縮小在另一個事業部動畫展示

http://jsfiddle.net/qmmVC/CSS的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可以縮小在另一個事業部動畫展示

回答

相關問題