jquery animate div来增加点击的高度和第二次点击的折叠

Question

我试图做一个div，点击时增加高度，然后当你点击关闭按钮时，它会回到原来的高度。

我已经成功地做出增加了点击的高度，并在第二次点击减少jquery的脚本，但它搞砸了，如图出于某种原因，布局：

它开始像这样，应该这样结束这对第二点击：

下面是HTML：

<div class="work"> 
    <h1 class="heading">Selected Projects</h1> 
    <div class="line"></div> 
     <ul> 
      <li id="darl"> 
       <div class="container2"><div class="block"> 
        <img class="bg-image" id="bgimg1" src="Images/perspective2final2pfolio2.jpg"> 
       </div></div> 
       <p>1. Darlington Terrace<i id="close1" class="fa fa-times-circle-o"></i></p> 
      </li> 

      <li><div class="thinline"></div></li> 
      <li id="chil"> 
       <div class="container2"><div class="block"> 
        <img class="bg-image" id="bgimg2" src="Images/DSC_0756.jpg"> 
       </div></div> 
       <p>2. Children's Playground</p> 
      </li> 

      <li><div class="thinline"></div></li> 
      <li id="lawn"> 
       <div class="container2"><div class="block"> 
        <img class="bg-image" id="bgimg3"src="Images/perspective2final2pfolio2.jpg"> 
       </div></div> 
       <p>3. Lawn Bowl Bakery Bridge</p> 
      </li> 

      <li><div class="thinline"></div></li> 
      <li id="aque"> 
       <div class="container2"><div class="block"> 
        <img class="bg-image" id="bgimg4"src="Images/perspective2final2pfolio2.jpg"> 
       </div></div> 
       <p>4. Aqueduct: Museum of Architecture</p> 
      </li> 

      <li><div class="thinline"></div></li> 
      <li id="velo"> 
       <div class="container2"><div class="block"> 
        <img class="bg-image" id="bgimg5"src="Images/perspective2final2pfolio2.jpg"> 
       </div></div> 
       <p>5. Velocity Frequent Flyer Website</p> 
      </li> 

      <li><div class="thinline"></div></li> 
     </ul> 

    </div> 

这里是jQuery的（忽略了mouseenter部分和溢出，为脚本中的另一个功能，和printf（）的是打印的高度进入控制台）：

$("#darl").on("click", function(){ 
    if($("#darl").height() == 38){ 

     $(this).finish().animate({ 
      height: "300px", 
     }, 500); 
     $("#darl .block").css("overflow", "visible"); 
     $(this).off('mouseenter'); 
    }else{ 
     $(this).finish().animate({ 
      height: "38px", 
     }, 500); 
    } 
printF(); 
     }); 

下面是完整的代码文件在GitHub上： https://github.com/mingweichan/CVwebsite

感谢您的帮助！

Answer 1

检查硬编码高度不是一个好主意。
使用CSS要方便得多。

只需为“可展开”项目声明一个类，并为其状态声明一个类。然后，使用jQuery切换这些类。 CSS转换将帮助你实现动画。

$("#darl").click(function() { 
 
    $(this).toggleClass('expanded'); 
 
});

#darl { 
 
    height: 38px; 
 
    background-color: grey; 
 
    
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    -ms-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
    
 
    overflow: hidden; 
 
} 
 

 
#darl.expanded { 
 
    height: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<li id="darl"> 
 
    <div class="container2"> 
 
    <div class="block"> 
 
     <img class="bg-image" id="bgimg1" src="Images/perspective2final2pfolio2.jpg"> 
 
    </div> 
 
    </div> 
 
    <p>1. Darlington Terrace<i id="close1" class="fa fa-times-circle-o"></i> 
 
    </p> 
 
</li>

现在，你还可以使用CSS规则来更改overflow：

#darl .block { 
    overflow: hidden; 
} 

#darl.expanded .block { 
    overflow: visible; 
}