当选中选项卡时更改div高度

Question

我有一个选项卡内容，其中有4个选项卡，在每个选项卡中都会有两个div组成边框设计。 我遇到的问题是，我不知道如何动画化这些div以在选择它们所在的选项卡时更改其高度。这里有一个参考fiddle，以下是标记。

<div class="container">
<ul class="tabs">
    <li class="tab-link current" data-tab="tab-1" id="welcome_selector">Welcome</li>
    <li class="tab-link" data-tab="tab-2">Tab Two</li>
    <li class="tab-link" data-tab="tab-3">Tab Three</li>
    <li class="tab-link" data-tab="tab-4">Tab Four</li>
</ul> 
<div class="tabcontentcontainer">
<div id="tab-1" class="tab-content current"> <div class="bordertop_animate"> </div>welcome tab will be empty, save for the borders <div class="borderbottom_animate"></div></div>
<div id="tab-2" class="tab-content"><div class="bordertop_animate"></div>        tab 2 content<div class="borderbottom_animate"></div>  </div>
<div id="tab-3" class="tab-content"><div class="bordertop_animate"></div>        tab 3 content<div class="borderbottom_animate"></div>  </div>
<div id="tab-4" class="tab-content"><div class="bordertop_animate"></div>        tab 4 content<div class="borderbottom_animate"></div>  
</div>
</div>
</div>

CSS

.container {
width: 1000px;
min-height: 400px;
margin: 0 auto;
}

ul.tabs {
margin: 0px;
padding: 0px;
list-style: none;
background: #000;
vertical-align: middle;
font-weight: 400;  
color:#FFF;
text-align: right;
text-transform: uppercase;
font-size: 8px;
letter-spacing: 0.6px;
}

ul.tabs li {
background: #000;
vertical-align: middle;
font-weight: 400;  
color:#FFF;
text-align: right;
text-transform: uppercase;
font-size: 8px;
letter-spacing: 0.6px;
display: inline-block;
padding: 55px 15px 55px 15px;
cursor: pointer;
}

ul.tabs li.current {
background: #000;
color: #FFF;
}

#welcome_selector {
float: left;
padding-left: 128px;
 }

.tabcontentcontainer {
height: 400px;
width: 1000px;
background: url(http://placehold.it/1000x400) #000;
position: relative;
}

.tab-content {
display: none;
background: rgba(0, 0, 0, 0.0);
padding: 15px;
}

.tab-content.current {
display: inherit;
}

.bordertop_animate {
position: absolute;
height: 38px;
width: 966px;
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
border-bottom: 0px solid #FFF;
border-left: 2px solid #FFF;
}

.borderbottom_animate {
position: absolute;
bottom: 15px;
height: 38px;
width: 966px;
border-top: 0px solid #FFF;
border-right: 2px solid #FFF;
border-bottom: 2px solid #FFF;
border-left: 2px solid #FFF;
}

JS

$(document).ready(function(){

$('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
})

})

我希望第一个标签页保持当前 div 的高度，即 38 像素，但我希望其他三个标签页的高度为 185 像素，并且在选择该标签页时将其高度从 38px 增长到 185px。动画效果类似于应用了 :hover css 选择器并带有 0.5 秒过渡的 div，但它会在选择标签页时发生，而不是在鼠标悬停时发生。

如果问题描述不够详细或不够具体，请见谅，这是我第一次发布问题和处理 jQuery。

- eiresione

---

已添加所需的 CSS，并且更加清晰明了——我只想在选项卡内部的两个 div 上实现高度效果（再次道歉，我之前没有表达清楚）。这两个 div 具有 'bordertop_animate' 和 'borderbottom_animate' 这两个类。 - eiresione

如果可能的话，我希望解决方案使用CSS3完成[我会尽快删除jQuery标签]。两个div ['bordertop_animate'和'borderbottom_animate']处于绝对位置，因此当新高度应用于它们时，它们将向父div的中心“增长”-如果这有意义的话。这也是它们为空的原因，我会在单独的div中放置其他内容。我已经通过:hover选择器在这两个div上实现了这一点，但我希望它在选定选项卡时发生。 - eiresione

另外，您也可以使用更少的jQuery：var tab_id = $(this).attr('data-tab'); $(this).addClass('current').siblings().removeClass('current'); $("#"+tab_id).addClass('current').siblings().removeClass('current'); - Popnoodles

好的。你只需要设置一次过渡效果。将其添加到:hover类中不会产生任何效果。 - Popnoodles

可能是使用纯CSS增加div大小的单击事件的重复问题。 - Adam

Answer 1

以下是一个jQuery解决方案，以防您需要。 JS Fiddle: http://jsfiddle.net/nPAhw/

HTML

<ul>
    <li id="tab1">Tab One</li>
    <li id="tab2">Tab Two</li>
</ul>

<div id="tabone">Tab one</div>
<div id="tabtwo">Tab Two</div>

css

#tabone{
    width:200px;
    height:38px;
    border:solid blue;
    margin:10px;
}
#tabtwo{
    width:200px;
    height:38px;
    border:solid black;
    margin:10px;
}
#tab1:hover{
    cursor:pointer;
}
#tab2:hover{
    cursor:pointer;
}

jquery / javascript

$('#tab1').click(function(){
    var h = $('#tabone').height();
    if(h < 185){    
        $('#tabone').animate({height:'185px'});
        $('#tabtwo').animate({height:'38px'});
    }
    else $('#tabone').animate({height:'38px'});
});

$('#tab2').click(function(){
    var h = $('#tabtwo').height();
    if(h < 185){    
        $('#tabtwo').animate({height:'185px'});
        $('#tabone').animate({height:'38px'});
    }
else $('#tabtwo').animate({height:'38px'});
});

- Behroz

Answer 2

你需要使用Jquery Animate方法。

该方法可以对任何数字CSS属性执行动画效果，例如高度，这正是你想要实现的。

$( ".element-class" ).animate({
  height: "185px"
}, 500);

- IndieRok

---

如果你仔细阅读问题，OP正在寻找CSS3解决方案，而不是jQuery动画。 - Popnoodles

我看到了这个标签，但是OP写道这是他第一次询问jquery。他没有明确指出他想要一个完整的CSS3解决方案。 - IndieRok

诚然，这句话有歧义，但他/她确实包含了CSS3标签，否则不会需要，并且谈到了过渡效果，而jQuery正在添加类.current，我坚持我的理论。 :) - Popnoodles

对我来说，这很好。我相信两种方式都能达到大致相同的结果，尽管我认为你的方法更有效率 :) 我自己还没有花时间测试大多数CSS3过渡属性。我可能会再深入研究一下！ - IndieRok

是的，你说得对，两种方法都可以实现类似的效果，但如果可以用CSS3代替animate，那么应该使用CSS3。简单的东西真的很容易做到。然而，这可能需要更多的时间来设置：http://cssdeck.com/labs/dancing-robot-with-reflection（它是纯CSS）。 - Popnoodles

我大多数时候使用greensock js库来制作动画，但我一定会花时间尝试CSS3。那个例子实际上非常不错。 - IndieRok