Jquery 设置div高度动画的困难

HTML

Jquery

.blok1 {    
    background-color: green;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    height: 200px;
    width: 300px;
    position: relative;     
}

.blok2 {        
    background-color: blue; 
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    position: absolute; 
    height: 200px;
    width: 300px;
    margin-left: 300px;
    margin-top: -200px;
}

.blok3 {        
    background-color: purple;   
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;    
    position: absolute; 
    height: 200px;
    width: 300px;
    margin-left: 600px;
    margin-top: -200px;
}

将鼠标悬停在第二个和第三个div上时，它的工作方式与预期的一样。但是，当您悬停在div 1上时，nmbr 2和nmbr 3将与数字1一起长距离移动

---

我尝试了很多东西，但似乎找不到。

将blok1

位置：绝对

，并从其他两个位置中删除

边距顶部

---

将blok1

位置：绝对
并从其他两个位置移除
边距顶部

使用此CSS

$(document).ready(function(){
  $(".blok1").hover(function(){
        $('.blok1').stop().animate({'height': '400px'}, 100);

      }, function(){
          $('.blok1').stop().animate({'height': '200px'}, 100);      
      });

  $(".blok2").hover(function(){
          $('.blok2').stop().animate({'height': '400px'}, 100);
      }, function(){
          $('.blok2').stop().animate({'height': '200px'}, 100);
      });

  $(".blok3").hover(function(){
        $('.blok3').stop().animate({'height': '400px'}, 100);
  }, function(){
          $('.blok3').stop().animate({'height': '200px'}, 100);
      });
});

使用此CSS

$(document).ready(function(){
  $(".blok1").hover(function(){
        $('.blok1').stop().animate({'height': '400px'}, 100);

      }, function(){
          $('.blok1').stop().animate({'height': '200px'}, 100);      
      });

  $(".blok2").hover(function(){
          $('.blok2').stop().animate({'height': '400px'}, 100);
      }, function(){
          $('.blok2').stop().animate({'height': '200px'}, 100);
      });

  $(".blok3").hover(function(){
        $('.blok3').stop().animate({'height': '400px'}, 100);
  }, function(){
          $('.blok3').stop().animate({'height': '200px'}, 100);
      });
});

为了寻求最可靠的答案，我提出了以下建议。但是，这确实需要稍微更改HTML：

.blok1 {    
background-color: green;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
height: 200px;
width: 300px;
position: absolute;     
}

.blok2 {        
background-color: blue; 
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
position: absolute; 
height: 200px;
width: 300px;
margin-left: 300px;
}

.blok3 {        
background-color: purple;   
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;    
position: absolute; 
height: 200px;
width: 300px;
margin-left: 600px;
}

…通过给这些框一个公共类，可以大大简化JavaScript：

.wrapper {
    white-space: nowrap; // forces all three bloks onto the same line
}
.blok {
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    height: 200px;
    width: 300px;
    display: inline-block;
    vertical-align: top;
}
#a {
    background-color: green;
}
#b {
    background-color: blue;
}
#c {
    background-color: purple;
}

为了寻求最可靠的答案，我提出了以下建议。但是，这确实需要稍微更改HTML：

.blok1 {    
background-color: green;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
height: 200px;
width: 300px;
position: absolute;     
}

.blok2 {        
background-color: blue; 
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
position: absolute; 
height: 200px;
width: 300px;
margin-left: 300px;
}

.blok3 {        
background-color: purple;   
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;    
position: absolute; 
height: 200px;
width: 300px;
margin-left: 600px;
}

…通过给这些框一个公共类，可以大大简化JavaScript：

.wrapper {
    white-space: nowrap; // forces all three bloks onto the same line
}
.blok {
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    height: 200px;
    width: 300px;
    display: inline-block;
    vertical-align: top;
}
#a {
    background-color: green;
}
#b {
    background-color: blue;
}
#c {
    background-color: purple;
}

注意关于

$(document).ready(function () {
    $(".blok").hover(function () {
        $(this).stop().animate({ // $(this) always refers to the current blok
            'height': '400px'
        }, 100);

    }, function () {
        $(this).stop().animate({
            'height': '200px'
        }, 100);
    });

});

一,。
位置：绝对影响div相对于具有位置：相对的div的最近父级的位置

2.使用position:absolute时，建议使用top、left、right和bottom来定位div。因为绝对元素不在内容流中

使用正确的约定编程将节省大量时间

以下是我的解决方案：

position:absolute

注2关于

$(document).ready(function () {
    $(".blok").hover(function () {
        $(this).stop().animate({ // $(this) always refers to the current blok
            'height': '400px'
        }, 100);

    }, function () {
        $(this).stop().animate({
            'height': '200px'
        }, 100);
    });

});

一,。
位置：绝对影响div相对于具有位置：相对的div的最近父级的位置

2.使用position:absolute时，建议使用top、left、right和bottom来定位div。因为绝对元素不在内容流中

使用正确的约定编程将节省大量时间

以下是我的解决方案：

position:absolute